JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px"></div>
JavaScript
var chart;
function CreateChart() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
series: {
shadow: false,
lineWidth: 0,
borderWidth: 0
}
},
series: [{
data: [{
'y': 32,
'toolTip': 'Program 32% Goal 12%'
},{
'y': 23,
'toolTip': 'Program 23% Goal 92%'
},{
'y': 80,
'toolTip': 'Program 80% Goal 78%'
},{
'y': 57,
'toolTip': 'Program 57% Goal 85%'
}],
color: 'rgba(255, 138, 106, 0.5)',
type: 'scatter',
zIndex: 1000
},{
data: [{
'y': 19,
'toolTip': 'Test Facility #023 19% Goal 12%'
},{
'y': 23,
'toolTip': 'Test Facility #023 23% Goal 92%'
},{
'y': 84,
'toolTip': 'Test Facility #023 84% Goal 78%'
},{
'y': 74,
'toolTip': 'Test Facility #023 74% Goal 85%'
}],
color: 'rgba(255, 214, 108, 0.5)'
},{
data: [{
'y': 12,
'toolTip': 'Goal 12% Program 32%'
},{
'y': 92,
'toolTip': 'Goal 92% Program 23%'
},{
'y': 78,
'toolTip': 'Goal 78% Program 80%'
},{
'y': 85,
'toolTip': 'Goal 85% Program 57%'
}],
color: 'rgba(0, 113, 173, 0.5)'
}]
});
}
$(document).ready(function() {
CreateChart();
});