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() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
},
line: {
events: {
checkboxClick: function (event){
if(event.checked)
{
var enabled = !this.options.dataLabels.enabled;
this.update({
dataLabels:{
enabled: enabled
}
});
return false;
}
else{
var a = !this.options.dataLabels.enabled;
this.update({
dataLabels:{
enabled: a
}
});
return true;
}
},
},
showInLegend: true,
showCheckbox: true
}
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
...