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