Learn Chart Js Line Chart with examples, get best 3 examples of line chart using chart js.
Topics
How to install Chart js.
Importing the chart js library into the HTML page is the first step in using chart js in your HTML.
I’m using the chart js CDN from the jsdelivr.net website for this tutorial. I am directly importing the chart js library from this website.
“https://cdn.jsdelivr.net/npm/chart.js” Is the link to the library.
Chart js Line Chart Example.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Example of line chart using Chart JS</h1>
<h2>Below chart shows website users in one week.</h2>
<div style="width: 35%;">
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Users Count',
data: [1000, 2000, 5000, 500, 1000, 10000],
borderWidth: 1,
borderColor : 'rgb(192, 0, 0)'
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
I have a CDN link in the head area that has already been mentioned. The Chart Js library will be loaded from that link. Chart Js functions can be used on an HTML page when the Chart Js library has been successfully loaded.
Following that, the h1 and h2 tags are used to display headings.
Following that, you can see that the div tag contains the style parameter width: 35%, which will shrink the size of the line Chart.
The ‘canvas’ tag, which is inside the div tag, is where the line chart will load.
I’ve provided you with a user count from one week in the example above. Labels representing weekdays in the example above will be shown on the X-axis.
I added the user count to the data, and that data is displayed on the line chart.
“borderWidth: 1,” will be the width of the line on the above line chart.
borderColor : ‘rgb(192, 0, 0)’ Will be the color of the line on the above line chart.
Chart js line chart multiple lines example.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Example of Multiple line chart using Chart JS </h1>
<h2>Below chart shows website users and earning of one week.</h2>
<div style="width: 35%;">
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Users Count',
data: [1000, 2000, 5000, 500, 1000, 10000],
borderWidth: 1,
borderColor : 'rgb(192, 0, 0)'
},
{
label: '$ Earning',
data: [800, 200, 500, 900, 5000, 1000],
borderWidth: 1,
borderColor : 'rgb(0, 192, 0)'
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
In the head area, I have a CDN link that has already been highlighted. At that connection, the Chart Js library will be loaded. When the Chart Js library has been properly loaded, Chart Js functions can be used on an HTML page.
After that, headings are shown using the h1 and h2 tags.
The style option width: 35%, which will reduce the size of the Multiple Line Chart, is then visible in the div tag.
The multiple line chart will load in the ‘canvas’ tag, which is located inside the div tag.
In the example above, I gave you a user count as of one week ago. In the aforementioned example, labels for weekdays will be displayed on the X-axis.
To show two lines In order to display two lines on the chart, I have included two data sets with two different colour schemes.
Data from the first line should be added to the first dataset, and data from the second line should be added to the second dataset.
You will add the RGB combination of the first line’s border color to the first dataset, and the RGB combination of the second line’s color to the second dataset.
Chart Js With More Articles
Important Links.
### Remove square brackets from string JavaScript
### How to check radio button in jQuery by name.
### How to add and remove class in JavaScript on click
### Settimeout JavaScript | Best 9 Settimeout JavaScript Examples