ApexCharts - Adding multiple series using appendSeries does not work

user_45951 0
Viewed 1167

I want to load and show multiple data series like this sample but my data is coming from web service. Sample like what I want

As per documents of ApexCharts we can use appendSeries to add data series to an existing chart.

Here is my JavaScript code that I am using to fetch data and add it as a new data series.

//Load second series
var url = 'chartdata_r02b.php';

$.getJSON(url, function(response){
    console.log(response);
    chart.appendSeries([{
    name: 'Stock Usage 2021-2022',
    data: response      
  }]);
  
});

If I use updateSeries then previously loaded series is getting replaced.

What is the problem here?

TIA

apexcharts jquery
1 Answers

appendSeries expects an Object, not an Array of Objects. You're adding a single new series to the Array of already existing ones for the chart.

Worth noting though that updateSeries on the other hand expects an Array of Objects because in this case, you're replacing the existing ones. (This is why the code example above works, and as you mention it replaces the existing series.)

If you wanted to add multiple new series without removing the existing ones you could either:

  1. Do this in a loop, passing each series to appendSeries individually.
  2. Combine the existing series from the chart and the new series from the web service into a single Array which is passed to updateSeries.
user_20645960
Related