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.jsExample 1: In this example, code shows a simple line chart with different colors.
<!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:
Example 2: In this example, code shows a line chart with styles in different form of lines style and with different colors.
<!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:
