Area chart on dynamicAnimation show line before area color

Hello my friend. Firstly, congrats for your plugin, thats awesome.

The problem: When i try to make a realtime Area chart, i get a behavior interesting. This is my code:

var lastDate = 0;
        var data = [];
        var data2 = [];
        function getDayWiseTimeSeries(baseval, count, yrange) {
            var i = 0;
            while (i < count) {
                var x = baseval;
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
                var y2 = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                data.push({
                    x, y
                });
                data2.push({
                    x, y: y2
                });
                lastDate = baseval
                baseval += 86400000;
                i++;
            }
        }

        getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 90
        })

        function getNewSeries(baseval, yrange) {
            var newDate = baseval + 86400000;
            lastDate = newDate
            data.push({
                x: newDate,
                y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
            })
            data2.push({
                x: newDate,
                y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
            })
        }

        var options = {
            chart: {
                height: 350,
                type: 'area',
                animations: {
                    enabled: true,
                    easing: 'linear',
                    speed: 800,
                    animateGradually: {
                        enabled: true,
                        delay: 100
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 150
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                name: 'RX',
                data: data
            }, {
                name: 'TX',
                data: data2
            }],
            xaxis: {
                type: 'datetime',
                range: 977600000,
            },
            yaxis: {
                max: 200
            },
            stroke: {
                curve: 'smooth'
            },
            tooltip: {
                x: {
                    format: 'dd/MM/yy HH:mm'
                },
            }
        }

        var chart3 = new ApexCharts(
            document.querySelector("#chart3"),
            options
        );

        chart3.render();

        window.setInterval(function () {
            getNewSeries(lastDate, {
                min: 10,
                max: 90
            })

            chart3.updateSeries([{
                data: data
            }, {
                data: data2
            }])
        }, 2000)

Explanation

• What is happening instead? The line of area is going to next point before the area color.

• What is the behavior you expect? Both, line and Area color go together to next point.

• What error message are you getting? None.

• An the last one Am i using correctly your plugin?

[junedchhipa]

Sure, a pull request is always welcome.

[marciosalinodias]

Alright my friend, im so glad for your quickly answer.

I will try to talk with them (SVG.js team) to find a way, and if exists, i come back. If they have the solution can i try to make this feature and make a pull request?

Just to help everyone

Thanks for now.