Chart.js Line Chart

Last Updated : 13 Dec, 2023

Chart.js line chart is a visual representation of data points connected by straight lines, depicting trends or patterns in a dataset over time or categories.

Syntax:

 let myBarChart = new Chart(ctx, {            
    type: 'line',            
    data: data,            
    options: options        
});

Dataset Properties

borderCapStyle – Cap style of the line
backgroundColor – it is used to fill the line.
borderColor – it colors the lines.
borderDash – Length and spacing of dashes
borderJoinStyle – Line joint style
fill – How to fill the area under the line
showLine – If false, the line is not drawn for this dataset.
spanGaps – If true, lines will be drawn between points with no or null data.
options – it configures the whole chart like
Scales – represents the units used on the graph.

Point Styling

pointBackgroundColor – The fill color for points.
pointBorderColor – The border color for points.
pointBorderWidth – The width of the point border in pixels.
pointHitRadius – The pixel size of the non-displayed point that reacts to mouse events.
pointRadius – The radius of the point shape. If set to 0, the point is not rendered.
pointRotation – The rotation of the point in degrees.
pointStyle – Style of the point

Interactions

pointHoverBackgroundColor – Point background color when hovered.
pointHoverBorderColor – Point border color when hovered.
pointHoverBorderWidth – Border width of point when hovered.
pointHoverRadius – The radius of the point when hovered.

CDN link

https://cdn.jsdelivr.net/npm/chart.js

Example 1: In this example, code shows a simple line chart with different colors.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Chart.js Line Chart</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
 
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        canvas {
            border: 2px solid #858080;
        }
    </style>
 
</head>
 
<body>
 
    <h1>GeeksForGeeks</h1>
    <h2>Line Chart Example - Simple</h2>
 
    <canvas id="myLineChart"
            width="380" height="180">
      </canvas>
 
    <script>
        // data for showing the line chart
        let labels = ['January', 'February', 
                      'March', 'April', 'May'];
        let dataset1Data = [10, 25, 13, 18, 30];
        let dataset2Data = [20, 15, 28, 22, 10];
 
        // Creating line chart
        let ctx = 
            document.getElementById('myLineChart').getContext('2d');
        let myLineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Solid Line',
                        data: dataset1Data,
                        borderColor: 'blue',
                        borderWidth: 2,
                        fill: false,
                    },
                    {
                        label: 'Solid Line',
                        data: dataset2Data,
                        borderColor: 'red',
                        borderWidth: 2,
                        fill: false,
                    },
                    {
                        label: 'Solid Line',
                        data: [15, 10, 20, 25, 12],
                        borderColor: 'green',
                        borderWidth: 2,
                        fill: true,
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Months',
                            font: {
                                padding: 4,
                                size: 20,
                                weight: 'bold',
                                family: 'Arial'
                            },
                            color: 'darkblue'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Values',
                            font: {
                                size: 20,
                                weight: 'bold',
                                family: 'Arial'
                            },
                            color: 'darkblue'
                        },
                        beginAtZero: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Values',
                        }
                    }
                }
            }
        });
    </script>
 
</body>
 
</html>

Output:

Output – 1

Example 2: In this example, code shows a line chart with styles in different form of lines style and with different colors.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Chart.js Line Chart</title>
 
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
 
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        canvas {
            border: 2px solid #858080;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
    <h2>Line Chart Example</h2>
    <canvas id="myLineChart"
            width="380"
            height="180">
     </canvas>
 
    <script>
        // data for showing the line chart
        let labels = ['January', 'February', 
                      'March', 'April', 'May'];
        let dataset1Data = [10, 25, 13, 18, 30];
        let dataset2Data = [20, 15, 28, 22, 10];
 
        // Creating line chart
        let ctx = 
            document.getElementById('myLineChart').getContext('2d');
        let myLineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Solid Line',
                        data: dataset1Data,
                        borderColor: 'blue',
                        borderWidth: 2,
                        fill: false,
                    },
                    {
                        label: 'Dashed Line',
                        data: dataset2Data,
                        borderColor: 'red',
                        borderWidth: 2,
                        borderDash: [5, 5], // Dashed line
                        fill: false,
                    },
                    {
                        label: 'Dotted Line',
                        data: [15, 10, 20, 25, 12],
                        borderColor: 'green',
                        borderWidth: 2,
                        borderDash: [2, 5], // Dotted line
                        fill: true,
                    },
                    {
                        label: 'Dash-Dot Line',
                        data: [30, 18, 25, 10, 22],
                        borderColor: 'purple',
                        borderWidth: 2,
                        borderDash: [5, 3, 1, 3], // Dash-Dot line
                        fill: false,
                    },
                    {
                        label: 'Long Dash Line',
                        data: [12, 20, 15, 28, 18],
                        borderColor: 'orange',
                        borderWidth: 2,
                        borderDash: [15, 5], // Long Dash line
                        fill: false,
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Months',
                            font: {
                                padding: 4,
                                size: 20,
                                weight: 'bold',
                                family: 'Arial'
                            },
                            color: 'darkblue'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Values',
                            font: {
                                size: 20,
                                weight: 'bold',
                                family: 'Arial'
                            },
                            color: 'darkblue'
                        },
                        beginAtZero: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Values',
                        }
                    }
                }
            }
        });
    </script>
 
</body>
 
</html>

Output:

Output – 2

Suggest improvement

Chart.js Doughnut and Pie Charts

Chart.js Mixed Chart Types

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Line Chart

Syntax:

Dataset Properties

Point Styling

Interactions

CDN link

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?