Too many ticks since 2.9.0

[arwenpi]

Hi all.

Apologies, JS beginner here, so please bear with me. I tried to reproduce this issue in the codepen but could not. I figured it was better to try and report than not to report at all.

I'm using:
"chart.js": "^2.8.0",
"chartjs-plugin-streaming": "^1.8.0",
"react-chartjs-2": "^2.8.0"

I'm using the streaming plugin to show realtime data coming in from an IOT device (an engine controller), across a range of 20 seconds. With 2.8.0 all works fine. The graph visually gives ticks of 1 second and performance is good.

After I upgraded to 2.9.0 performance went down and the number of visual lines/ticks went up to several times per second, at erratic intervals (e.g. 10.123 ms, 10.567 ms etc) and after investigation via the callback:

            afterBuildTicks: function(axis, ticks) {
              console.log(`XJ ${JSON.stringify(axis.id)}, ${JSON.stringify(ticks)}`);
              return ticks;
            }

... it seems that the function has gone from receiving 10 ticks (version 2.8.0):

XJ "x-axis-0",
[
{
"value": 1572179576000,
"major": false
},
{
"value": 1572179574000,
"major": false
},
{
"value": 1572179572000,
"major": false
},
{
"value": 1572179570000,
"major": false
},
{
"value": 1572179568000,
"major": false
},
{
"value": 1572179566000,
"major": false
},
{
"value": 1572179564000,
"major": false
},
{
"value": 1572179562000,
"major": false
},
{
"value": 1572179560000,
"major": false
},
{
"value": 1572179558000,
"major": false
},
{
"value": 1572179556000,
"major": false
},
{
"value": 1572179554000,
"major": false
}
]

To one per ms:
[{"value":1572176827185,"major":false},{"value":1572176827184,"major":false},{"value":1572176827183,"major":false},{"value":1572176827182,"major":false},{"value":1572176827181,"major":false},{"value":1572176827180,"major":false},
... etc.
(ending up with thousands of them for my case).

The reason I think it's chart.js related is that if I push the version back to 2.8.0 using npm, leaving all other libraries the same, all works fine again (that's where I got the sample data from).

Here's my config:

<Line
// height={120}
data={{
datasets: [
{
fill: false,
label: t("graphs.adaptives.axis.a1"),
data: adaptive1,
yAxisID: "y-axis-1",
lineTension: 0,
backgroundColor: "rgba(66,104,244,0.2)",
borderColor: "rgba(66,104,244,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(66,104,244,0.4)",
hoverBorderColor: "rgba(66,104,244,1)",
type: "line"
},
{
fill: false,
label: t("graphs.adaptives.axis.a2"),
data: adaptive2,
yAxisID: "y-axis-1",
lineTension: 0,
backgroundColor: "rgba(255,163,35,0.2)",
borderColor: "rgba(255,163,35,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,163,35,0.4)",
hoverBorderColor: "rgba(255,163,35,1)",
type: "line"
},
{
fill: false,
label: t("engine.rpm"),
data: engineRPM,
yAxisID: "y-axis-2",
lineTension: 0,
backgroundColor: "rgba(104,244,66,0.2)",
borderColor: "rgba(104,244,66,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(104,244,66,0.4)",
hoverBorderColor: "rgba(104,244,66,1)",
type: "line"
}
]
}}
options={{
plugins: {
streaming: {
frameRate: 5 // 5fps
}
},
maintainAspectRatio: false,
animation: false,
scales: {
xAxes: [
{
afterBuildTicks: function(axis, ticks) {
console.log(XJ ${JSON.stringify(axis.id)}, ${JSON.stringify(ticks)});
return ticks;
},
type: "realtime",
ticks: {
reverse: context.reverseGraphs
},
realtime: {
duration: 20000, // data in the past 20000 ms will be displayed
refresh: 1000,
pause: false, // chart is not paused
ttl: undefined // data will be automatically deleted as it disappears off the chart
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: false
},
labels: {
show: true
},
ticks: {
min: -100,
max: 100
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show: true
},
ticks: {
min: 0,
max: 8000
}
}
]
} // scales
}}
/>

Thanks for any assistance. (For now I'll leave it at 2.8.0).

[benmccann]

@arwenpi do these ticks all show up on the chart? Chart.js 2.9.0 does produce many more ticks in some scenarios, but then the autoSkip functionality usually removes most of them. autoSkip happens after afterBuildTicks

Chart performance overall is 25-50% faster in 2.9.0 than 2.8.0 depending on your chart in all the benchmarks I've run, so I'd think that even with more ticks that upgrading to 2.9.0 should have your chart rendering much more quickly.

Are you doing some logic in your own afterBuildTicks? Would you be able to share? I think if so and you were able to tweak that logic to be faster then you would find overall chart performance to actually be much faster with Chart.js 2.9.0

[arwenpi]

@benmccann The ticks don't all show up on the chart, no - there were a few entries per second in odd ms ranges visually.

I played with some of options that I saw being used in the chart.js code that may be implicated: time.unit: "second" and the autoSkip that you mentioned. Both seemed to help but I can only seem to reproduce the issue sporadically since I re-upgraded to 2.9.0 (even if I set all code/options back to how it was...). At the moment I cannot seem to reproduce it at all. Odd. I have no other functions/callbacks hooked into the graph.

Unfortunately it seems that the streaming library doesn't like 2.9.0 either (it doesn't scroll) so I'll have to remain on 2.8.0 anyway.

[benmccann]

@arwenpi here's some more tips to make your chart faster that may help: https://github.com/chartjs/Chart.js/blob/master/docs/general/performance.md. In particular, I would try setting the ticks.sampleSize option which would improve performance especially when there are more ticks (it only has an effect in 2.9.0)

@nagix here's a report that the streaming plugin doesn't work with 2.9.0

@arwenpi @nagix there was a report that panning on with the zoom plugin didn't work with 2.9.0. A fix for that was committed and we're releasing 2.9.1. Perhaps you could try the streaming plugin with 2.9.1 when it's released to see if that works better

[benmccann]

@arwenpi 2.9.1 has been released. Can you try again with it setting the ticks.sampleSize option?

[arwenpi]

@benmccann I tried 2.9.1. The ticks coming through the afterBuildTicks and the labels are sensible; I still cannot reproduce the thousands of ms level ticks being thrown around. I wish I knew why.

The streaming chart still doesn't work, however, moving the graph a tick at a time once per second or so instead of the smooth scrolling it has with 2.8.0.

[benmccann]

Hmm, yeah, the streaming samples seem to be broken as well. E.g. changing @nagix's sample below to 2.9.1 behaves strangely:
https://github.com/nagix/chartjs-plugin-streaming/blob/master/samples/line-horizontal.html

[benmccann]

@arwenpi it looks like it's performance related. It works much better if I set the following:

	ticks: {
		source: 'data',
		sampleSize: 10
	}