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 =
</ 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.
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 =
</ 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: