Highcharts Spline updating each second

Question

I found Highcharts Spline updating each second in the examples. https://www.highcharts.com/demo/highcharts/dynamic-update

But in this example there is only one data array. I tried to adapt this example for several arrays, but I ran into the following problem. The chart is updated smoothly for the first 10 times. The 10th number is the specified maximum length of the array, after overcoming it, the oldest point on the graph is erased. So, after 10 times, only the most recent array is smoothly drawn, the first 2 appear instantly, without animation. I suppose this is due to which array the last point will be written to.

I tried to use setData() instead of addPoint, but the results were no better.

My example: https://jsfiddle.net/krouvy/Lptgkod0/5/

    const onChartLoad = function () {
        const chart = this,
            series = chart.series,
            data = []

        for (let i = -19; i <= 0; i += 1) {
            data.push({
                x: null,
                y: null
            })
        }

        chart.addSeries({
            name: "Random data1",
            lineWidth: 2,
            color: Highcharts.getOptions().colors[2],
            data: data,
            animation: {
                duration: 1,
            }
        })
        chart.addSeries({
            name: "Random data2",
            lineWidth: 2,
            color: "red",
            data: data,
            animation: {
                duration: 1,
            }
        })
        chart.addSeries({
            name: "Random data3",
            lineWidth: 2,
            color: "blue",
            data: data,
            animation: {
                duration: 1,
            }
        })

        let interval = setInterval(function () {

            const x =  new Date().getTime(),
                  y = Math.random()


            series[0].addPoint([x, y], true, true)
            series[1].addPoint([x, y], true, true)
            series[2].addPoint([x, y], true, true)

        }, 1000)
    }

// Plugin to add a pulsating marker on add point
    Highcharts.addEvent(Highcharts.Series, "addPoint", e => {
        const point = e.point,
            series = e.target

        if (!series.pulse) {
            series.pulse = series.chart.renderer.circle()
                .add(series.markerGroup)
        }

        setTimeout(() => {
            series.pulse
                .attr({
                    x: series.xAxis.toPixels(point.x, true),
                    y: series.yAxis.toPixels(point.y, true),
                    r: series.options.marker.radius,
                    opacity: 1,
                    fill: series.color
                })
                .animate({
                    r: 20,
                    opacity: 0
                }, {
                    duration: 1000
                })
        }, 1)
    })



    Highcharts.chart("container", {
        accessibility: {
            enabled: false
        },
        chart: {
            backgroundColor: "#252734",
            type: "spline",
            events: {
                load: onChartLoad
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: "Live random data",
            style: {
                color: "#FFF"
            }
        },
        xAxis: {
            type: "datetime",
            tickPixelInterval: 150,
            maxPadding: 0.1,
            lineColor: "#FFF",
            labels: {
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
        },
        yAxis: {
            title: {
                text: "values",
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
            labels: {
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
            plotLines: [{value: 0, width: 1, color: "#808080"}]
        },
        tooltip: {
            headerFormat: "<b>{series.name}</b><br/>",
            pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
            itemStyle: {
                color: "#FFF",
                fill: "#FFF",
                fontWeight: 700,
                fontSize: "12px",
                fontFamily: `Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif`,
            }
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
    })

I am trying to achieve a smooth animation of the appearance of all lines on the graph, as in the Highcharts example for a single line. I have no problem displaying the graph or adding a second line to it. The only problem is the lack of smoothness after the array reaches its maximum length.

Answer 1

That's because you are redrawing your chart after each addPoint call. It's enough to do that only once per interval pass.

  let interval = setInterval(function() {
    const x = new Date().getTime(),
      y = Math.random();

    series[0].addPoint([x, y], false, true);
    series[1].addPoint([x, y], false, true);
    series[2].addPoint([x, y], true, true);
  }, 1000)

---

Live demo: https://jsfiddle.net/BlackLabel/vdg1yqho/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint