ApexCharts toggle data with buttons example

How to toggle the data series on an ApexCharts chart using buttons without doing a page reload.

ApexCharts methods is the process to modify a chart or graph after it has been rendered.

updateSeries() updates a series data array and updateOptions() is updating config options like titles and colours.

CodePen example.

On button click

Focusing on changing the chart to show the FGA values, The button has an id of fga-btn

<button type="button" class="btn btn-warning mx-2" id="fga-btn">FGA</button>

A click handler to fire when it gets clicked:

$("#fga-btn").on("click", function() {
    console.log("Changing chart to FGA");
    //updateOptions and updateSeries here
});

This prints “Changing chart to FGA” when the FGA button is clicked.

Update chart title and ticks

Firstly change the title of the chart, the y-axis title, ticks and then the bar fill colours

chart.updateOptions({
    title: {
        text: "John Smith FGA per season"
    },
    yaxis: {
        title: {
            text: "FGA",
            style: {
                fontWeight: 600
            }
        },
        tickAmount: 10,
        min: 0,
        max: 750
    },
    xaxis: {
        title: {
            style: {
                fontWeight: 600
            }
        }
    },
    fill: {
        colors: ["#ffc107"]
    }
});

This gets done before changing the charts series data as it keeps the animation occurring on change.

Update the chart data

Finally, update the charts series data:

chart.updateSeries([{
    name: "FGA",
    data: fga_array
}]);

The example above is using a hardcoded array, another option is an array returned from an Ajax GET request.

This gets done for each of the three buttons, noting that by default FGM is what the chart initialises as.

Source code

HTML:

<div class="container">
    <div class="row text-center mt-2">
        <div class="col-12">
            <button type="button" class="btn btn-success mx-2" id="fgm-btn">FGM</button>
            <button type="button" class="btn btn-warning mx-2" id="fga-btn">FGA</button>
            <button type="button" class="btn btn-primary mx-2" id="fgp-btn">FGP</button>
        </div>
    </div>
    <div class="row justify-content-center">
        <div id="chart" style="min-height: 480px;"></div>
    </div>
</div>

Javascript/jQuery:

$("#fgm-btn").on("click", function() {
    console.log("Changing chart to FGM");
    chart.updateOptions({
        title: {
            text: 'John Smith FGM per season'
        },
        yaxis: {
            title: {
                text: 'FGM',
                style: {
                    fontWeight: 600
                }
            },
            tickAmount: 10,
            min: 0,
            max: 750
        },
        xaxis: {
            title: {
                style: {
                    fontWeight: 600
                }
            }
        },
        fill: {
            colors: ['#198754']
        }
    })
    chart.updateSeries([{
        name: 'FGM',
        data: fgm_array
    }])
});
$("#fga-btn").on("click", function() {
    console.log("Changing chart to FGA");
    chart.updateOptions({
        title: {
            text: 'John Smith FGA per season'
        },
        yaxis: {
            title: {
                text: 'FGA',
                style: {
                    fontWeight: 600
                }
            },
            tickAmount: 10,
            min: 0,
            max: 750
        },
        xaxis: {
            title: {
                style: {
                    fontWeight: 600
                }
            }
        },
        fill: {
            colors: ['#ffc107']
        }
    })
    chart.updateSeries([{
        name: 'FGA',
        data: fga_array
    }])
});
$("#fgp-btn").on("click", function() {
    console.log("Changing chart to FGP");
    chart.updateOptions({
        title: {
            text: 'John Smith FGP per season'
        },
        yaxis: {
            title: {
                text: 'FGP',
                style: {
                    fontWeight: 600
                }
            },
            tickAmount: 10,
            min: 0,
            max: 100
        },
        xaxis: {
            title: {
                style: {
                    fontWeight: 600
                }
            }
        },
        fill: {
            colors: ['#0d6efd']
        }
    })
    chart.updateSeries([{
        name: 'FGP',
        data: fgp_array
    }])
});

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
    }],
    chart: {
        type: 'bar',
        height: 350
    },
    colors: ['#198754'],
    title: {
        align: 'center',
        text: 'John Smith FGM 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',
            style: {
                fontWeight: 600
            }
        },
        tickAmount: 10,
        min: 0,
        max: 750
    },
    fill: {
        opacity: 1
    }
};

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