apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.05k stars 1.28k forks source link

Animation wrong when updating series (3.48 worked, 3.49 not working) #4420

Closed VeloAddict closed 2 months ago

VeloAddict commented 2 months ago

Description

When using 3.48: https://imgur.com/a/xgFYhWI https://github.com/apexcharts/apexcharts.js/assets/36549/7bd6d731-c029-4903-9daf-4b182fed0848

When using 3.49: https://imgur.com/a/tA1kbaW https://github.com/apexcharts/apexcharts.js/assets/36549/613e6a64-8818-4dbc-a19d-4721f7c00f05

Steps to Reproduce

  1. Update from 3.48 to 3.49
brianlagunas commented 2 months ago

There is not enough information provided to diagnose this issue. The required reproduction link was not provided.

VeloAddict commented 2 months ago

@brianlagunas the only code that changed was the version for apexcharts.

import ApexCharts from 'apexcharts';

let series = [
    {
        name: 'RX',
        data: Array.from({ length: 20 }, () => { return 0 })
    },
    {
        name: 'TX',
        data: Array.from({ length: 20 }, () => { return 0 })
    }
];

const updateSeries = (data) => {
    _.each(data, (value, key) => {
        series[key].data.push(value);
    });
    chart.updateSeries(series);
};

let chart = new ApexCharts(
        document.querySelector('#resources-monitor .network-chart'),
        {
            noData: {
                text: 'Loading...'
            },
            series: series,
            chart: {
                sparkline: {
                    enabled: true,
                },
                type: 'area',
                width: '100%',
                height: 100
            },
            xaxis: {
                type: 'numeric',
                range: 10
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 1
            },
            tooltip: {
                x: {
                    show: false
                },
                y: {
                    formatter: (value) => {
                        return `${value}/s`;
                    }
                }
            }
        }
    );
    chart.render();

    setInterval(() => {
        updateSeries([Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)]);
    }, 1000);
VeloAddict commented 1 month ago

@brianlagunas

I managed to put together an example that shows the issue: https://codepen.io/velobarplus/pen/NWVWRNB