Straight Lines and Curves Lines in the Same Graph

[Chart Js]- Straight Lines and Curves Lines in the Same Graph

Hi, guys, welcome back to Appsloveworld. In our previous article, we learned about How to Create Multi-Line Chart Using Chart js in detail. And now moving ahead, let’s learn about another great feature of Chart Js i.eHow we can create straight lines and curves lines in the same graph using Chart.js.

Straight Lines and Curves Lines in the Same Graph

 

Straight lines and curves lines in the same graph

we can create this task using the lineTension option of dataset ,bezierCurve is a chart level option using that we can the curved of the line chart. In the below example, we have taken two datasets i. eJavaScript Developer and Chart Js Developer. and for Chart Js Developer we have set lineTension to 1.

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js-Multi line charts </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: 'JavaScript Developer',
                        lineTension: 0,
                        backgroundColor: 'blue',
                        borderColor: 'blue',
                        data: [100, 500, 600, 800, 700, 900, 1200, 850, 970, 750, 1100]
                    },
                    {
                        label: 'Chart Js Developer',
                        lineTension: 1,
                        borderColor: 'red',
                        data: [88, 800, 450, 550, 350, 820, 620, 730, 740, 660, 669]
                    }
                ]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Software developers in organization',
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Year'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Employees'
                        }
                    }
                }
            }
        };
        new Chart("myLineChart", MultiLinechartData);
    </script>

</body>
</html>

*Thank you so much if you have a question please comment

So what I want to do here is it will be green. So I want to grab this green color here, I’ll set it in green, and else if that’s not the case I want the default color of red. We’re going to put it in their semicolon.

All right, so now we have this here and then of course what we need to do is to return so we’ll look through every item here based on this condition, and then it will return the matching value. So we say return it will say here return the value of the color.

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.