Freeze Highchart Animation-CodePudding

The spline produced from Highchart below is "re-drawn" every time ajax refreshes.

My question then is there a way for the spline to be updated "in-place" so the spline isn't re-drawn every time a refresh occurs?

I've tried setting animation: false however the redrawing keeps happening. Thank you in advance!

JS code:

$(document).ready(function(){

function my_chart(response) {
    // $('#data-container').highcharts({
        chart = Highcharts.chart('data-container', {
        chart: { renderTo: 'data-container',
        defaultSeriesType: 'spline'
        //    animation: false
        },
        title: {
            text: 'Live Reddit Stream'
        },
        xAxis: {//{ type: 'datetime',
                categories: response.halfhour

        },
        yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {text: 'Value',
                margin: 80}
        },
        series: [{
            name: 'reddit_stream',
            data: response.count
        }]
    });
}


$(function fetchdata() {
        $.ajax({
            url: '/fetch_data',
            type:'POST',
            dataType: '',
            success: function(output_string){
            //call my_chart function

            my_chart(output_string);
            
            },
            
            complete:function(output_string){
                setTimeout(fetchdata,10000);
            },

            error: function (xhr, ajaxOptions, thrownError){
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        });
    });
 });

CodePudding user response：

You need to disable animation on a series level:

    Highcharts.chart('container', {
        ...,
        series: [{
            animation: false,
            ...
        }]
    });

Live demo: http://jsfiddle.net/BlackLabel/gmbLh1v3/

But it is better to update a chart than create a new one after every request. Example: http://jsfiddle.net/BlackLabel/nxmqwp4j/

API Reference:

https://api.highcharts.com/highcharts/chart.animation

https://api.highcharts.com/highcharts/series.line.animation

https://api.highcharts.com/class-reference/Highcharts.Chart#update