v3 Regression: Line doesn't draw when points are out of range

[beibean]

Expected Behavior

Line should be drawn as it was in v2.9.4.

Current Behavior

When we have a line with two points out of X range (min/max), this line is not drawn.

Steps to Reproduce

For a linear graph:

• Set x.min: 0
• Set x.max: 100
• Set two points laying at x: -10 and x: 100

See this project

Context

We need this in our application, where you can see temperature changes in different zooms levels such as day or hour. With this behaviour, when you move to an hour zoom where temperature has not changed, you see an empty graph which is very ugly.

Environment

• Chart.js version: 3.5.0
• Link to your project: See this project

[kurkle]

This is actually the y-scale determining its range so that the line is drawn outside. (change suggestedMax to 50 in that reproduce and the line is visible)

Some thoughts:
I think a proper way of handling this would be for the line to interpolate its values at the edges of x-range, but currently the interpolation needs points to be updated - so it would need another pass on the update cycle.
Maybe the interpolation could be done from the parsed array instead to avoid the 2nd pass.

[beibean]

This is actually the y-scale determining its range so that the line is drawn outside. (change suggestedMax to 50 in that reproduce and the line is visible)

I know changing the suggestedMax would work for the example case. But anyway, it does not work as expected. If you don't provide any suggested limits, y-scale is not properly calculated and line would not be drawn neither.

Is there any plan to fix this issue within comming versions?

[beibean]

@kurkle

I just came back to use chart.js again. I upgraded to last version (v3.6.2) and bug still occurrs.

Any plans to fix it in the near future?

Edit: Here is project repo with new chart.js

[beibean]

If anyone is interested in the partial solution I have applied on app side:

• Detect when we have only two points and they are out of range on X-axis.
• In that case, configure sugestedMin and sugestedMax for Y-axis. As min/max of those two points.
• Chartjs now renders properly.
• Remember to reset sugestedMin and sugestedMax when plotting new data.

Anyway, I think this should be integrated within chartjs.