Exception: too far apart with stepSize of 1 second

[leonbrag]

I have a HTML (server generated) that renders chartJS.

Relevant code:

options: {
              tooltips: {
                  callbacks: {
                    label: function(tooltipItem, data) {                      
                      //var value = data.datasets[0].data[tooltipItem.index].y;
                      var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
                      return value;
                    }
                  } // end callbacks:
                }, //end tooltips
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'xy',
                            rangeMin: {
                                y: 0
                              }
                        },
                        zoom: {
                            enabled: true,
                            mode: 'xy'
                        }
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{                      
                       type: "time",                                          
                       distribution: 'linear',
                        time:  {
                          unit: 'second'
                        },
                        ticks: {             
                          autoSkip: true,
                        }
                    }],
                    yAxes: [{
                      scaleLabel: {
                        display: true,
                        labelString: 'Distance to top',
                        fontStyle: 'bold'
                      },
                      ticks: {
                        beginAtZero: true
                      }
                    }]
                }

There are two identical datasets each with 3600 entires, where each entry looks like this and defers either by 10 seconds or 30 seconds (chart shows sensor measures with either 10 or 30 seconds intervals):

data:
[
{ y:25, x:new moment ('2020-07-08T03:04:21')},
{ y:25, x:new moment ('2020-07-08T03:04:31')},
.... 3600 total entries
}

Problem:

Exception is reported (and chart is not rendered):

chart.js@2.9.3:7 Uncaught 1594203771000 and 1594311811000 are too far apart with stepSize of 1 second

chart.js@2.9.3:7 Uncaught TypeError: Cannot read property 'skip' of undefined
    at Qt (chart.js@2.9.3:7)
    at te (chart.js@2.9.3:7)
    at ie (chart.js@2.9.3:7)
    at Qe.getElementsAtEventForMode (chart.js@2.9.3:7)
    at Qe.handleEvent (chart.js@2.9.3:7)
    at Qe.eventHandler (chart.js@2.9.3:7)
    at n (chart.js@2.9.3:7)
    at HTMLCanvasElement.Me.<computed> (chart.js@2.9.3:7)

When there are say around 1000 data points, chart is rendered and no exceptions are reported.

Environment

Chart.js v2.9.3
All browsers (Chrome, Edge)

[benmccann]

1594203771000 = Wed Jul 08 2020 10:22:51
1594203771000 = Thu Jul 09 2020 16:23:31

That's about 30 hours, which would be over 100,000 ticks. You can't have that many labels on the axis

Can you remove unit: 'second' from your chart config?

[leonbrag]

@benmccann - thank you, removing "units: 'seconds' cause the chart render correctly!

When unit is removed, will chartJs automatically determines most appropriate scale given the start and end timestamps?

[benmccann]

Yes

[estani]

I had a similar issue. I got the problem in the labels though, removing them helped me finding it out, maybe that helps other 👍