Chart.js: time format deprecated issue

Created on 18 Jan 2020 · 7Comments · Source: chartjs/Chart.js

Hi, i would like to reopen the issue thats going on in this thread.
https://github.com/chartjs/Chart.js/issues/6677

i found out that these warning pops out every 10milisec? when i use the below plugins.

【warnings poping out】

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

72200621-0958be80-348f-11ea-8a81-34ebb4f74741
since it pops out in high rate, the memory will be decreased, leading huge lag.

【plugins that makes warning】
①chart.js 2.9.3
②chart.js financial plugin
③chart.js streaming plugin 1.8.0

I have made a quick sample html here.
http://aifx2.sakura.ne.jp/realtimecharttest2.html

please kindly confirm.

<!DOCTYPE HTML>
<html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">



<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</body>


<script>

 var past =  {t:Date.now()-20000, o:87, h: 101, l: 78, c: 100};
 var past2 = {t:Date.now()-40000, o:87, h: 101, l: 78, c: 100}
 console.log(past);
var ask = Math.random();


setInterval(function () {

    annotationx= Date.now();

    annotationy = 90;
    return annotationx;
    return annotationy; 


}, 10000); 





function onRefresh(chart) {
    var t = Date.now();
    var data2 = chart.data.datasets[0].data;
    var last;

    t -= t % 1000;
    if (data2.length === 0) {
        data2.push(past);
        data2.push(past2);
    }
    last = data2[data2.length - 1];
    if (t != last.t) {
        var c = last.c;
        last = { t: t, o: c, h: c, l: c, c: c };
        data2.push(last);
    }
    last.c += Math.random() - 0.5;
    last.h = Math.max(last.h, last.c);
    last.l = Math.min(last.l, last.c);





}

var config = {
    type: 'candlestick',
    data: {
        datasets: [
{
            data: [],
            fractionalDigitsCount: 2
        },





]
    },
    options: {


        title: {
            display: true,
            text: 'Financial chart sample'
        },
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                type: 'realtime',
                realtime: {
                    duration: 120000,
                    refresh: 100,
                    delay: 0,
                    onRefresh: onRefresh
                }
            }]
        },
        tooltips: {
            position: 'nearest',
            intersect: false
        },
        animation: {
            duration: 0
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myChart = new Chart(ctx, config);
};


</script>

bug 2

Source

rashearth

👍1

All 7 comments

@rashearth would you be able to change your example so that it uses the non-minified version of Chart.js (https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.js)? Otherwise it's not possible to debug and understand what is happening.

benmccann on 19 Jan 2020

It looks to me like perhaps the issue is the warning is printed when the option is not undefined, but the default value is false

This issue has been fixed for 3.0. I'm unsure as to whether we would fix it for 2.9 since we're focused on 3.0 right now

benmccann on 19 Jan 2020

sure, i have changed the to nonminified version
(https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.js)

thx for the considering

rashearth on 20 Jan 2020

I think you can work around this by setting the time.format to undefined.

kurkle on 17 Feb 2020

👍1

FWIW - this fixed this issue for me, along with a bad stutter in animation. This was with using the chart.js streaming plugin 1.8.0 (maybe this should be raised on that project too/instead?)

This issue only happened with using chartjs as an NPM module and rollup, but did not happen when using chartjs via head include.

ptone on 11 Mar 2020

this should be fixed.

Spongman on 10 May 2020

Hey, i found the solution, just change the time.format to time.parser and it will fix your issue, I mean from the chart JS options where it is
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
change the bold word "format" to parser and that's it.