<!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 >
|