How to Create Curved Lines Instead of Straight Lines in Chart.js?

In this article, we're going to answer the question of how to create a curved line graph in Chart.js. The reason is that in Chart.js, the default setting for line charts used to be curved lines for one version and straight lines for another. However, as of Chart.js 3, the default is always set to straight lines.

Curved Line Graph in chart js

So let’s start and explore how can we get curved lines instead of straight lines using charts. And then what we need to do here as well as to add up the Chart Js library. So let’s get that one as well. you can copy the CDN.

Make sure that this is always above the Chart or the JavaScript code because this code is dependent on the ChartJS library. And what we’re going to do is we’re just going to put in here a Div And then nested the canvas.

How to Create Curved Lines Instead of Straight Lines in Chart

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js-Curved Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
    <div style="margin-left:5%;margin-right:5%">
        <canvas id="myLineChart" style="width:100%;max-width:80%"></canvas>
    </div>
    <script>
        var xValues = [2011, 2012, 2013, 2014, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
        const MultiLinechartData = {
            type: "line",
            data: {
                labels: xValues,
                datasets: [
                    {
                        label: 'Visitor',
                        lineTension: 1,//this property is used for setting the line curved
                        borderColor: 'red',
                        data: [300, 450, 450, 550, 700, 620, 1200, 1120, 1050, 1159, 1120]
                    }
                ]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Visitor',
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Year'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Visitor'
                        }
                    }
                }
            }
        };
        new Chart("myLineChart", MultiLinechartData);
    </script>

</body>
</html>

So the first thing that we need to do is we need to go to ChartJS. What we’re going to do is we’re going to get the basic Documentation of the line chart.

And you’ll see here the options And it has lineTension option here. Let me go down more there you are in the options. We’re going to look for lineTension. Once we are here somewhere down here, the lineTension is by default set from zero. So once we click on lineTension, you will see here a few items.

Linetension

It is set on zero. This is the default setting. So we say here you can put in here any options. Let me say here put a BJ curve tension. It’s a really top word to say.

Let me say here’s zero. If we do here zero and put in a comma, save that, go back here. Refresh. You can see nothing changed because the default is set at zero. So if you want to have a nice elastic curve, we have to do just 0.4 would be more than enough.

lineTension

You can see. And now as you can see, we can start to get a more elastic style while the tension is just decent. If you put it on one, you will ease the tension so much that it might create weird shapes. As you can see here, it looks like an elastic band has been snapped into two pieces or has been snapped. And what is happening is basically it has no more tension.

Tension is zero. I wonder if you can even extend it to two. Let’s see what happens. There you are. You can see it now the attention doesn’t make sense at all.

So this is of course not really that recommended but I would say within 0.5 or 0.4 should be more than sufficient. From my personal experience, 0.4 is the perfect one. As you can see. You will see here that’s more standard and we can even go or when we decrease the tension more and more to zero when the tension will be as high as possible.

Now it starts to get more straight as you can see if it goes to 0.1, refresh. Here. Now you can see the shape of a straight line while there are still just very tiny rounded edges here, curves making the tension still a little bit elastic.

And eventually, if you put in zero, of course then we go back to the straight line and now you can see here very solid sharp edges. This is basically the way how you can do in charge of how you can increase or decrease the tension.

I would say to get rounded curves, 0.4 is more than sufficient. Thank you for watching this video and I hope you enjoy it. And if you enjoyed this video, you probably will enjoy this one as well. And if you’re interested in charges, check out in the description box link directing to my charges course where you can learn everything about charges, and finally of course make sure you subscribe to my channel.

How to Create Curved Lines Instead of Straight Lines in Chart.js?

Curved Line Graph in chart js

lineTension

Read Similar Articles