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/chart.js@3.7.1/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

The post [Chart JS]- How to Make Sharp Lines to Smooth Curved Lines? appeared first on Software Development | Programming Tutorials.



Read More Articles