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();