JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
chachart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "spline",
zoomType: 'x'
},
title: {
text: 'Inverter ~ AC Currents'
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
plotOptions: {
spline: {
turboThreshold: 2000,
lineWidth: 2,
states: {
hover: {
enabled: true,
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled : true,
radius: 5,
lineWidth: 1
}
}
}
}
},
xAxis: {
type: 'datetime',
labels: {
rotation: -45,
align: 'right',
style: "font: 'normal 10px Verdana, sans-serif'"
},
title: {
text: 'Date/Time'
}
},
yAxis: {
title: {
text: 'Current ~ Amps'
...