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.
HTML
<!DOCTYPE html> <html> <head> <title>Chart JS Line Chart </title> <script src= </script> <script src= </script> </head> <body> <div> <h1 style="color:green;"> neveropen </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> |
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.
HTML
<!DOCTYPE html> <html> <head> <title>Chart JS Line Chart </title> <script src= </script> <script src= </script> </head> <body> <div> <h1 style="color:green;"> neveropen </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> |
Output:
