Can I change series array completely in highcharts

Question

I have a requirement where I need to change series array completely in the chart,

I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine, now when the user clicks on the disabled legend corresponding data should be added automatically to the chart, I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends

chart For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image is there any way to replace series array completely.

Something like

chart.update({
    series:newSeriesArray
});

I am using the bar chart from highchart. Thanks in advance.

Wojciech Chmiel Wojciech Chmiel · Accepted Answer · 2018-10-23T10:33:52

I have 2 legends in my chart

Do you have a separate legend for each series or do you mean legend item for each series?

Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:

  {
    name: 'Year 2016',
    data: [],
    visible: false
  }

When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:

  plotOptions: {
    bar: {
      events: {
        legendItemClick: function() {
          if (!this.data.length) {
            this.setData([665, 234, 2344, 123, 23])
          }
        }
      }
    }
  }

Demo: https://jsfiddle.net/wchmiel/uLfcknsb/

Can I change series array completely in highcharts

1 Answers