Hide series on initial render in a multi-series chart

A small guide to show how to hide series via configuration without calling external methods.

Let’s say you have 10 different line series and you don’t want to show all of them on the first render. You want to highlight only a particular series out of them and keep all other series hidden.

Since, v3.53.0, we have introduced series.hidden property, which is helpful in hiding a series on initial render.

Example

Below is configuration for the series array to illustrate it

var options = {
  chart: {
    type: 'line',
  },
  series: [{
    name: "ABC",
    hidden: true,
    data: [
      {
        "x": "category 1",
        "y": 12
      },
      {
        "x": "category 2",
        "y": 20
      },
    ]
  }, {
    name: "XYZ",
    data: [
      {
        "x": "category 1",
        "y": 25
      },
      {
        "x": "category 2",
        "y": 14
      },
    ]
  }],
}

var chart = new ApexCharts(
  document.querySelector("#chart"),
  options
);

chart.render();

Once you run the above code snippet, you will see that series ABC is hidden on initial render. You will have to click on the legend to activate it again.