How to get curved lines instead of straight lines in Chart.js

This video shows you how to control in a line chart the tension. The tension of the line makes a line curved or straight. By default the tension is set to maximum which leads to straight lines.

How to get curved lines instead of straight lines in Chart.js

Chart.js Tension or bezierCurve

The tension namespace can be considered the elasticity of the line and is referred to as the bezierCurve. Which is a very complicated drawing technique for the canvas API.

The more tension the straighter the line of the line chart. To create curve lines in Chart.js we need to lower the tension by increasing the tension value. This will make the lines more curved and rounded. By loosening the tension too much you will get an unmotivated rubberband that does not hold any force.

Was this page helpful?

Leave a Reply