JSFiddle - React, Tailwind, and code Playground
by Black Label
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
JavaScript
Highcharts.chart('container', {
"chart": {
"backgroundColor": "#000",
"type": "spline",
"zoomType": "x"
},
"accessibility": {
"enabled": false
},
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#ffffff"
}
},
"rangeSelector": {
"enabled": false
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
},
"xAxis": {
"categories": ["Apr 2, 2024", "Apr 3, 2024", "Apr 4, 2024", "Apr 5, 2024", "Apr 6, 2024", "Apr 7, 2024", "Apr 8, 2024", "Apr 9, 2024", "Apr 10, 2024", "Apr 11, 2024", "Apr 12, 2024", "Apr 13, 2024", "Apr 14, 2024", "Apr 15, 2024", "Apr 16, 2024", "Apr 22, 2024", "Apr 17, 2024", "Apr 26, 2024", "Apr 27, 2024", "Apr 29, 2024", "Apr 30, 2024"],
tickInterval: 2,
"labels": {
"style": {
"color": "#ffffff"
}
},
"lineColor": "#ffffff",
"lineWidth": 3
},
"yAxis": [{
"gridLineColor": "#000",
"lineColor": "#fff",
"lineWidth": 3,
"labels": {
"style": {
"color": "#fff"
}
},
"title": {
"text": ""
},
"opposite": false
}, {
"title": {
"text": "",
"color": "#fff"
},
"opposite": true,
"gridLineColor": "#000",
"lineColor": "#fff",
"lineWidth": 3,
"labels": {
"style": {
"color": "#fff"
}
}
}],
"tooltip": {
"backgroundColor": "#283347",
"style": {
"color": "#fff"
},
"shared": true,
"useHTML": true
},
"plotOptions": {
"series": {
"fillOpacity": 0,
"marker": {
"enabled": false,
"states": {
"hover": {
"enabled": true
}
}
}
}
},
"series": [{
"name": "visits",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 2182294
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 2139585
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 2104361
...