ApexCharts hide and show series data with buttons example

How to show and hide different data series on an ApexCharts chart by using buttons.

Using ApexCharts methods gives the ability to modify a chart or graph after it has been rendered.

hideSeries() will hide a visible data series and showSeries() shows a hidden series.

CodePen example.

Ensure with the series data you include a name, this is referenced when hiding or showing the series data

series: [{
        name: "FGM",
        data: fgm_array
    },
    {
        name: "FGA",
        data: fga_array
    },
    {
        name: "FGP",
        data: fgp_array
    }
]

The process is as simple as doing an onclick event for a button and then hiding the relevant series by using its name

$("#hide-fgm-btn").on("click", function() {
    chart.hideSeries("FGM");
});

Showing this series again:

$("#show-fgm-btn").on("click", function() {
    chart.showSeries("FGM");
});

My example had 3 series on the y-axis so I had to do show/hide status toggles and conditionals to update the axis titles. But that expands outside of a simple show and hide.

Source HTML

<div class="container">
  <div class="row text-center mt-2">
    <div class="col-4 text-end">
      <p>Hide:</p>
    </div>
    <div class="col-8 text-start">
      <button type="button" class="btn btn-success btn-sm mx-2" id="hide-fgm-btn">FGM</button>
      <button type="button" class="btn btn-warning btn-sm mx-2" id="hide-fga-btn">FGA</button>
      <button type="button" class="btn btn-primary btn-sm mx-2" id="hide-fgp-btn">FGP</button>
    </div>
  </div>
  <div class="row text-center mt-2">
    <div class="col-4 text-end">
      <p>Show:</p>
    </div>
    <div class="col-8 text-start">
      <button type="button" class="btn btn-success btn-sm mx-2" id="show-fgm-btn">FGM</button>
      <button type="button" class="btn btn-warning btn-sm mx-2" id="show-fga-btn">FGA</button>
      <button type="button" class="btn btn-primary btn-sm mx-2" id="show-fgp-btn">FGP</button>
    </div>
  </div>
  <div class="row justify-content-center">
    <div id="chart" style="min-height: 480px;"></div>
  </div>
</div>

Source Javascript

let fgm_status = fga_status = true;

$("#hide-fgm-btn").on("click", function () {
  fgm_status = false;
  console.log("Hide FGM");
  if (fga_status) {
    chart.updateOptions({
      yaxis: [
        {},
        {
          title: { text: "FGA", style: { fontWeight: 600 } },
          tickAmount: 10,
          min: 0,
          max: 750
        },
        {
          opposite: true,
          title: { text: "FGP", style: { fontWeight: 600 } },
          min: 0,
          max: 100,
          tickAmount: 10
        }
      ]
    });
  }
  chart.hideSeries("FGM");
});

$("#show-fgm-btn").on("click", function () {
  fgm_status = true;
  console.log("Show FGM");
  if (fga_status) {
    chart.updateOptions({
      yaxis: [
        { labels: { show: false } },
        {
          title: { text: "FGM/A", style: { fontWeight: 600 } },
          tickAmount: 10,
          min: 0,
          max: 750
        },
        {
          opposite: true,
          title: { text: "FGP", style: { fontWeight: 600 } },
          min: 0,
          max: 100,
          tickAmount: 10
        }
      ]
    });
  } else {
    chart.updateOptions({
      yaxis: [
        {
          title: { text: "FGM", style: { fontWeight: 600 } },
          tickAmount: 10,
          min: 0,
          max: 750
        },
        { labels: { show: false } },
        {
          opposite: true,
          title: { text: "FGP", style: { fontWeight: 600 } },
          min: 0,
          max: 100,
          tickAmount: 10
        }
      ]
    });
  }
  chart.showSeries("FGM");
});

$("#hide-fga-btn").on("click", function () {
  fga_status = false;
  console.log("Hide FGA");
  if (fgm_status) {
    chart.updateOptions({
      yaxis: [
        {
          title: { text: "FGM", style: { fontWeight: 600 } },
          tickAmount: 10,
          min: 0,
          max: 750
        },
        {},
        {
          opposite: true,
          title: { text: "FGP", style: { fontWeight: 600 } },
          min: 0,
          max: 100,
          tickAmount: 10
        }
      ]
    });
  }
  chart.hideSeries("FGA");
});

$("#show-fga-btn").on("click", function () {
  fga_status = true;
  console.log("Show FGA");
  if (fgm_status) {
    chart.updateOptions({
      yaxis: [
        { labels: { show: false } },
        {
          title: { text: "FGM/A", style: { fontWeight: 600 } },
          tickAmount: 10,
          min: 0,
          max: 750
        },
        {
          opposite: true,
          title: { text: "FGP", style: { fontWeight: 600 } },
          min: 0,
          max: 100,
          tickAmount: 10
        }
      ]
    });
  }
  chart.showSeries("FGA");
});

$("#hide-fgp-btn").on("click", function () {
  console.log("Hide FGP");
  chart.hideSeries("FGP");
});

$("#show-fgp-btn").on("click", function () {
  console.log("Show FGP");
  chart.showSeries("FGP");
});

let season_array = [
  "2013-14",
  "2014-15",
  "2015-16",
  "2016-17",
  "2017-18",
  "2018-19",
  "2019-20",
  "2020-21"
];
let fgm_array = [204, 288, 335, 392, 406, 453, 497, 522];
let fga_array = [487, 581, 620, 633, 659, 683, 697, 718];
let fgp_array = [41, 49, 54, 61, 61, 66, 71, 72];

var chart_options = {
  series: [
    {
      name: "FGM",
      data: fgm_array
    },
    {
      name: "FGA",
      data: fga_array
    },
    {
      name: "FGP",
      data: fgp_array
    }
  ],
  chart: {
    type: "bar",
    height: 350
  },
  colors: ["#198754", "#ffc107", "#0d6efd"],
  title: {
    align: "center",
    text: "John Smith FGM FGA FGP per season",
    style: { fontWeight: 1 }
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: "55%",
      endingShape: "rounded"
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    show: true,
    width: 2,
    colors: ["transparent"]
  },
  xaxis: {
    categories: season_array,
    title: {
      text: "SEASON",
      style: { fontWeight: 600 }
    }
  },
  yaxis: [
    {
      title: {
        text: "FGM/A",
        style: { fontWeight: 600 }
      },
      tickAmount: 10,
      min: 0,
      max: 750
    },
    {
      labels: {
        show: false
      }
    },
    {
      opposite: true,
      title: {
        text: "FGP",
        style: { fontWeight: 600 }
      },
      min: 0,
      max: 100,
      tickAmount: 10
    }
  ],
  fill: { opacity: 1 }
};

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