Odtnhj

Main multispline chart

HI All, as shown in the image, I am plotting multispline chart using highcharts. What I want is to plot only 'a' while loading the chart and the rest will be invisible and I could add them later like this Higcharts Spline (only one).
Thank you in advance.
This previous answered question partly working in my case but I don't want to hide all the series. I want to have one visible series.

You can use Highcharts.Chart.addSeries() method to add additional series dynamically:

Html:

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<button id="btn">Add series</button>

JS:

let data = [
 name: 'Installation',
 data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
, 
 name: 'Manufacturing',
 data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
, 
 name: 'Sales & Distribution',
 data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
, 
 name: 'Project Development',
 data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
, 
 name: 'Other',
 data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
];

let btn = document.querySelector('#btn');
let i = 1;

btn.addEventListener('click', () => 
 if (i < data.length) 
 chart.addSeries(data[i]);
 i++;
 
);

let chart = Highcharts.chart('container', 
 chart: 
 type: 'spline'
 ,
 plotOptions: 
 series: 
 marker: 
 enabled: false
 ,
 pointStart: 2010
 
 ,
 series: [
 data[0]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/rtsznykp/3/