How to Make Sharp Lines to Smooth Curved Lines

[Chart JS]- How to Make Sharp Lines to Smooth Curved Lines?

In this article, we will discuss How to make sharp lines to smooth curved lines using Chart JS. If you are new at charts js and you are looking for converting this graph to a smooth line chart then you have come to the right place.

If you take the default example from the chart js then you will get the sharp lines but our requirement is to make it smooth curve lines using chart js.

How to Make Sharp Lines to Smooth Curved Lines

we can easily achieve this task using the option lineTension that needs to be defined on the line chart dataset. set a value below 1.

lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines. Source: Chart Js Documentation

Make Sharp Lines to Smooth Curved Lines

<!DOCTYPE html>
<html>
<head>
    <title>Set Different Color For Each Bar based on value Using chart.js</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="linechart" style="width:80%"></canvas>
    </div>
    <script>
        var LineChartData = {
            labels: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "June",
                "July",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec"
            ],
            datasets: [
                {
                    label: "sales",
                    borderWidth: 2,
                    backgroundColor: "blue",
                    borderColor:"red",
                    lineTension: 1,
                    data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125]
                }
            ]
        };
        const config = {
            type: 'line',
            data: LineChartData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
            title: {
                display: true,
                text: "Smooth curve line chart"
            }
        };

        window.onload = function () {
            new Chart("linechart", config);
        };

    </script>

</body>
</html>

sxds

Ashok Patel

I'm a software engineer, having good experience in software programming web designing with great command on ASP.NET, React JS, Angular JS,.NET Core HTML5, JavaScript, T-SQL, JQuery.
Also have great experience in Electronics and electrical engineers design.
I like to do RND and Research.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.