JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
events: {
show: function () {
if(this.options.id !== 'up'){
//chart.get('up').visible = true;
//chart.redraw();
chart.get('up').setVisible(false,false);
chart.get('up').setVisible(true,false);
chart.get('up').visible = false;
}
},
hide: function () {
if(this.options.id !== 'up'){
//chart.get('up').visible = true;
//chart.redraw();
chart.get('up').setVisible(false,false);
chart.get('up').setVisible(true,false);
chart.get('up').visible = false;
}
}
}
}
},
series: [
{
name: 'UpperLimit',
id: 'up',
color: '#FF0000',
dashStyle: 'ShortDash',
visible: false,
showInLegend: false,
data: [
[1, 100],
[10, 100]
]
},
{
name: 'S1',
//color: '#FF0000',
data: [
[1, 29.9],
[2, 71.5],
[3, 106.4]
]
},{
name: 'S2',
//color: '#FF0000',
data: [
[3, 60.9],
[4, 40.5],
[5, 90.0],
[6, 80.4]
]
},{
name: 'S3',
//color: '#FF0000',
data: [
[5, 30.9],
[6, 60.5],
[7, 70.0],
[8, 20.4]
]
},{
name: 'S4',
//color: '#FF0000',
data: [
[7, 40.9],
[8, 50.5],
[9, 30.0],
[10, 40.4]
...