Tension works as inertia

[salatielosorno]

I am trying to create charts with curve lines between points. I have found the property tension useful but I am not sure if it is the expected behaviour that when we have two points with the same Y axis value it look as a curve instead of as a plain line.

Has anybody found a way to get this done? Or why is the reason about this behavior?

[chrispahm]

Hey,

Thanks for raising an issue! Just a little reminder: Small reproducible examples help me a lot when answering these types of issues. It saves me a lot of time setting up an example fitting your use-case, and you get a faster reply. So it's a win-win 😉

The setting you are looking for is called cubicInterpolationMode, which can be set in the data properties of each dataset. The Chart.js documentation states

The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.

In your specific use case, you may prefer cubicInterpolationMode: "monotone", which does the following:

The 'monotone' algorithm is more suited to y = f(x) datasets: it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points

Here's an example chart comparing the two settings:

https://jsfiddle.net/9h5be8xk/4/

Closing this as answered, please re-open if this doesn't solve your issue

[salatielosorno]

Thanks a lot for your answer. @chrispahm