Chartjs error : time scale: "time.format" is deprecated. Please use "time.parser" instead

Question

I am using Chartjs for my project. Different versions I am using are: ChartJS 2.9.3, Chartjs-plugin-streaming 1.8.0, moment.js 2.24.0,chartjs-adapter-moment 0.1.1. I plotting a realtime chart and I get this warning every second which is filling memory very fast.

time scale: "time.format" is deprecated. Please use "time.parser" instead

My code is:

    private chartPlotting() {
    this.Linecap.push(new Chart('canvas', {
        type: 'line',
        data: {
            datasets: [{
                label: 'Flow',
                lineTension: 0,
                data: [],
                borderColor: '#3cb371',
                fill: false
            },
            {
                label: 'Height',
                lineTension: 0,
                data: [],
                borderColor: '#FF0000',
                fill: false
            }
            ]
        },
        options: {
            responsive: true,
            scales: {
                xAxes: [{
                    type: 'realtime',
                    time: {
                        parser: 'false'
                    },
                    display: true
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 10,
                        stepSize: 5,
                        max: 500
                    }
                }],
            },
            plugins: {
                streaming: {
                    duration: 300000,
                    refresh: 1000,
                    delay: 2000,
                    pause: false,
                    ttl: undefined,
                    frameRate: 48,

                    onRefresh: function (Linecap) {
                        ///var data = []
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', url);
                        xhr.onload = function () {
                            var data = JSON.parse(xhr.responseText);
                            Linecap.data.datasets[0].data.push({
                                x: Date.now(),
                                y: data[0]["yrData"]
                            });
                            Linecap.data.datasets[1].data.push({
                                x: Date.now(),
                                y: data[0]["Height"]
                            });
                        };
                    }
                }
            }
        }
    }));
}

I tried to find out reason for this and came to know that may be in next version of chartJS i.e. 3.0.0 this problem will be removed. Is there any work around for getting rid of this error in 2.9.3?

Answer 1

The problem is due to incompatible versions of the different libraries you're using.

The documentation of chartjs-plugin-streaming for example states the following:

Version 1.8 requires Chart.js 2.7.x or 2.8.x.

To get rid of the problem, you have two options.

1. get rid of chartjs-plugin-streaming
2. downgrade Chart.js 2.9.3 to 2.8.0

UPDATE

With Angular 8, I recommend using ng2-charts, which is based on Chart.js. Further you should get rid of chartjs-plugin-streaming and implement related functionality by your own.

Please have a look at the following StackBlitz