JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="graph-div" id="graph-container-95f2d9ada2cabe64d10fd8b0b6aa2af3"></div>
CSS
div.graph-div {
min-width: 400px;
margin: 25px auto;
width:100%;
}
JavaScript
/**
* registers a graph for use by the system
*/
function registerGraph(uniqueKey, options) {
if (!window.charts) {
window.charts = $H();
}
if (typeof options !== 'undefined') {
window.charts.set(uniqueKey, new Highcharts.Chart(
options
));
}
}
registerGraph('1304_0_0', {
"chart": {
"zoomType": "x",
"marginRight": 0,
"height": 500,
"defaultSeriesType": "column",
"marginLeft": 100,
"marginTop": 25,
"renderTo": "graph-container-95f2d9ada2cabe64d10fd8b0b6aa2af3"
},
"credits": {
"enabled": false
},
"legend": {
"itemStyle": {
"width": "150px"
},
"enabled": false,
"align": "right",
"layout": "vertical",
"verticalAlign": "top",
"x": -10,
"y": 30
},
"plotOptions": {
"area": {
"borderWidth": 0
},
"areaspline": {
"borderWidth": 0
},
"line": {
"borderWidth": 0
},
"pie": {
"borderWidth": 0
},
"series": {
"borderWidth": 1
},
"spline": {
"borderWidth": 0
},
"column": {
"borderWidth": 0
},
"bar": {
"borderWidth": 0
}
},
"series": [{
"data": [{
"y": 1.0},
{
"y": 2.0},
{
"y": 1.0},
{
"y": 2.0},
{
"y": 3.0},
{
"y": 2.0},
{
"y": 2.0}],
"name": "Default"}],
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"categories": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
},
"yAxis": {
"title": {
"text": "Total"
}
}
});