how do I refresh new data in ApexCharts?

Question

anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas. but I dont have idea how to reload the data ini ApexCharts this my script

var options = {
            series: [{
            name: 'Stock Value',
            type: 'column',
            data: val_data_1
        }, {
            name: 'Actual Value',
            type: 'column',
            data: val_data_2
        }, {
            name: 'difference',
            type: 'line',
            data: val_data_3
        }],
            chart: {
            height: 350,
            type: 'line',
            stacked: false
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: [1, 1, 4]
        },
        title: {
            text: 'XYZ - Stock Opname',
            align: 'left',
            offsetX: 110
        },
        xaxis: {
            categories: categories,
        },
        yaxis: [
            {
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#008FFB'
            },
            labels: {
                style: {
                colors: '#008FFB',
                }
            },
            title: {
                text: "Stock Value",
                style: {
                color: '#008FFB',
                }
            },
            tooltip: {
                enabled: true
            }
            },
            {
            seriesName: 'Income',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#00E396'
            },
            labels: {
                style: {
                colors: '#00E396',
                }
            },
            title: {
                text: "Actual Value",
                style: {
                color: '#00E396',
                }
            },
            },
            {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#FEB019'
            },
            labels: {
                style: {
                colors: '#FEB019',
                },
            },
            title: {
                text: "Differences",
                style: {
                color: '#FEB019',
                }
            }
            },
        ],
        tooltip: {
            fixed: {
            enabled: true,
            position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
            offsetY: 30,
            offsetX: 60
            },
        },
        legend: {
            horizontalAlign: 'left',
            offsetX: 40
        }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it

Answer 1

Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js

To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.

 let options = { series: [{ name: 'Series', data: [1, 7, 3] }], chart: { type: 'line', height: 350 }, dataLabels: { enabled: false }, xaxis: { categories: ['Category 1', 'Category 2', 'Category 3'] } }; let chart = new ApexCharts(document.querySelector('#chart'), options); chart.render(); function getRandomNumber() { return Math.floor(Math.random() * 10); } document.querySelector('button').addEventListener('click', () => { chart.updateSeries([{ data: [getRandomNumber(), getRandomNumber(), getRandomNumber()] }]) });

 button { padding: 10px; color: white; background-color: #0d6efd; border: none; border-radius: 5px; cursor: pointer; } button:hover { color: black; background-color: #0dcaf0; }

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chart"></div> <button type="button">Update series</button>