How to Implement Line Chart using ChartJS ?
Last Updated :
05 Aug, 2024
Improve
In this article, we will learn to implement a line chart using the Chart JS CDN library.
A line chart is a chart that helps in plotting data points on a line. It is used to show data that is in some current trend or some change in information with time or the comparison of two data sets. It connects many points using a line or segment. It helps in analyzing or predicting future markets and opportunities.
Approach:
- In the HTML design, use the <canvas> tag for showing the line graph.
- In the script part of the code, instantiate the ChartJS object by setting the type, data, and options properties of the library.
- Set other required options inside each property like datasets, label, borderColor,fill, scales, and others as per the need of the programmer.
CDN link:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>
Syntax:
new Chart($("#ID"), {
type: 'line',
data: { ... },
options: { ... }
});
Example 1: The following code shows a simple example of a line chart with months of the year on the horizontal axis and a number dataset on the vertical axis.
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Line Chart </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>
</head>
<body>
<div>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Chart JS Line Chart </h3>
<div>
<canvas id="lineChartID"></canvas>
</div>
</div>
<script>
// line chart
new Chart($("#lineChartID"), {
type: 'line',
data: {
labels: [
'January', 'February', 'March',
'April', 'May', 'June', 'July'
],
datasets: [{
label: 'My Dataset',
data: [65, 71, 62, 81, 34, 55, 47
],// End data
borderColor: 'green',
fill: false,
tension: 0.1
}]// End datasets
}// End data
});
</script>
</body>
</html>
51
1
2
<html>3
4
<head>5
<title>Chart JS Line Chart </title>6
<script src=7
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">8
</script>9
<script src=10
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">11
</script>12
13
</head>14
15
<body>16
<div>17
<h1 style="color:green;">18
GeeksforGeeks19
</h1>20
21
<h3>Chart JS Line Chart </h3>22
23
<div>24
<canvas id="lineChartID"></canvas>25
</div>26
</div>27
28
<script>29
30
// line chart31
new Chart($("#lineChartID"), {32
type: 'line',33
data: {34
labels: [35
'January', 'February', 'March', 36
'April', 'May', 'June', 'July'37
],38
datasets: [{39
label: 'My Dataset',40
data: [65, 71, 62, 81, 34, 55, 4741
],// End data42
borderColor: 'green',43
fill: false,44
tension: 0.145
}]// End datasets46
}// End data 47
});48
</script>49
</body>50
51
</html>Output:
Example 2: The following code shows another example of a line chart. Each segment is styled using some of the helper functions. Gaps in the data ('skipped') are set to dashed lines and segments with values going 'down' are set to a different color as shown below in the output picture.
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Line Chart </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>
</head>
<body>
<div>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Chart JS Line Chart </h3>
<div>
<canvas id="lineChartID"></canvas>
</div>
</div>
<script>
const skipped = (ctx, value) => ctx.p0.skip
|| ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y >
ctx.p1.parsed.y ? value : undefined;
// Setting generic options
const genericOptions = {
fill: false,
interaction: {
intersect: false
},
radius: 0,
};
// Setting options in a line chart
new Chart($("#lineChartID"), {
type: 'line',
data: {
labels: [
'January', 'February', 'March',
'April', 'May', 'June', 'July'
],
datasets: [{
label: 'My Dataset',
data: [65, 71, 62, NaN, 34, 55, 47
],// End data
borderColor: 'green',
segment: {
borderColor: ctx => skipped(ctx,
'rgb(0,0,0,0.2)') ||
down(ctx, 'rgb(192,75,75)'),
borderDash: ctx => skipped(ctx, [6, 6]),
},
spanGaps: true
}]// End datasets
},// End data
options: genericOptions
});
</script>
</body>
</html>
70
1
2
<html>3
4
<head>5
<title>Chart JS Line Chart </title>6
<script src=7
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">8
</script>9
<script src=10
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">11
</script>12
</head>13
14
<body>15
<div>16
<h1 style="color:green;">17
GeeksforGeeks18
</h1>19
20
<h3>Chart JS Line Chart </h3>21
22
<div>23
<canvas id="lineChartID"></canvas>24
</div>25
</div>26
27
<script>28
const skipped = (ctx, value) => ctx.p0.skip29
|| ctx.p1.skip ? value : undefined;30
const down = (ctx, value) => ctx.p0.parsed.y >31
ctx.p1.parsed.y ? value : undefined;32
33
// Setting generic options34
const genericOptions = {35
fill: false,36
interaction: {37
intersect: false38
},39
radius: 0,40
};41
42
// Setting options in a line chart43
new Chart($("#lineChartID"), {44
type: 'line',45
data: {46
labels: [47
'January', 'February', 'March', 48
'April', 'May', 'June', 'July'49
],50
51
datasets: [{52
label: 'My Dataset',53
data: [65, 71, 62, NaN, 34, 55, 4754
],// End data55
borderColor: 'green',56
segment: {57
borderColor: ctx => skipped(ctx, 58
'rgb(0,0,0,0.2)') ||59
down(ctx, 'rgb(192,75,75)'),60
borderDash: ctx => skipped(ctx, [6, 6]),61
},62
spanGaps: true63
}]// End datasets64
},// End data 65
options: genericOptions66
});67
</script>68
</body>69
70
</html>Output:
