JSFiddle - React, Tailwind, and code Playground
by ewolden
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: {
line: {
events: {
legendItemClick: function() {
chart.yAxis[0].addPlotLine({
value: 7.5,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'My PlotLine'
}
});
var seriesIndex = this.index;
var series = this.chart.series;
if (this.visible && this.chart.restIsHidden) {
for (var i = 0; i < series.length; i++) {
if (series[i].index != seriesIndex) {
series[i].show();
}
}
this.chart.restIsHidden = false;
} else {
for (var i = 0; i < series.length; i++) {
if (series[i].index != seriesIndex) {
series[i].hide();
}
}
this.show()
this.chart.restIsHidden = true;
}
return false;
}
},
showInLegend: 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'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function()...