Hi, guys, welcome back to Appsloveworld. In our previous article, we learned about Chart Js in detail. And now moving ahead, let’s learn about another striking feature of Chart Js i.e How we can create a Multiple-line charts in chart.js.
As we know that Chart.js is Built using JavaScript and requires the use of the HTML <canvas> element and a JavaScript function to create the chart. and then we add Datasets, borderColor, labels, background colors, ToolTip, and other configurations that are needed for our Graph.
In this article, we will learn about how to use chart.js for creating dynamic multi-line charts with simple examples.
How to Create Multi Line Chart Using Chart js?
So let start, I have taken an HTML page and added the latest chart js CDN reference to our page. and in the HTML, we have taken a Canvas element for creating the line chart graph.
<!DOCTYPE html>
<html>
<head>
<title>Chart.js-Multi line charts </title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="myLineChart" style="width:100%;max-width:500px"></canvas>
</div>
<script>
var xValues = [2011, 2012, 2013, 2014, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
const MultiLinechartData = {
type: "line",
data: {
labels: xValues,
datasets: [
{
label: 'JavaScript Developer',
lineTension: 0,
backgroundColor: 'blue',
borderColor: 'blue',
data: [100, 500, 600, 800, 700, 900, 1200, 850, 970, 750, 1100]
},
{
label: 'React Developer',
lineTension: 0,
borderColor: 'green',
data: [98, 450, 750, 900, 650, 988, 1550, 880, 600, 800, 1300]
},
{
label: 'Chart Js Developer',
lineTension: 0,
borderColor: 'red',
data: [88, 800, 450, 550, 350, 820, 620, 730, 740, 660, 669]
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Software developers in organization',
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Year'
}
},
y: {
display: true,
title: {
display: true,
text: 'Employees'
}
}
}
}
};
new Chart("myLineChart", MultiLinechartData );
</script>
</body>
</html>
Codepen Code-Editor Example
*Thank you so much if you have a question please comment
Code Explanation
The MultiLinechartData is the variable that contains all the data and styling properties of the multi-line chart graph. It is a javascript object with multiple properties that are used to create the chart.
The labels property in MultiLinechartData variable is an array that is used to assign the point in the x-axis and the datasets property is also an array that contains information such as line chart title, backgroundColor,borderColor, and The lineTension property is used to control the curvature of the line joining the points. data is an array that represents the x-axis values.
Chart. Js Basic
we’re gonna get started by essentially just adding a chart. Js to our webpage and just generally getting set up. So let’s get going on that now.
So to get started I have an HTML5 page. No HTML is something that has been used for a long time to just quickly get up and running. You don’t need any sort of generator or anything like that. You just create an HTML5.
At the end here, all that really matters is that you have something to get going. Now if you want to get this code directly, you can have access to the code there. But really like I said, it’s just HTML5.
Now there are lots of ways that you could go about adding charts to your application. If you click getting started, it’s going to take you to the GitHub page where you can see how you can install it with Bower or with node.
Now because I just want to get going as simple as possible. You can use NPM or Bower or any of these other methods. I’m just going to grab the CDN version. You’ll notice if you click on this link, it’s a hosted version of this file. You can copy this path directly, just paste it in here as the script that you’re loading.
So in our footer here we can just come down here. at the bottom of our body, we can just come down here and add a script and we can add a source and that source is just going to simply be equal to the path. So nothing fancy here. And since this is HTML5, we don’t need to do type JavaScript or anything like that. Okay.
But as you can see, chart js directly from CDN. And you might be wondering, well, do I need jquery or any of that stuff? we don’t so we can comment here. but as you can see here, we’re now loading using a CDN file and we just have a standard JavaScript file.
The post [Simple Trick]-Create a Multi Line Chart Using Chart.js appeared first on Software Development | Programming Tutorials.
Read More Articles
- [Simple Way]-JavaScript Edit table row Using Popup
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- Fetch and display data from API in React JS using Axios
- CRUD operation in React JS using Hooks
- Crud operations in React Js with Axios and Rest API
- How to edit/delete selected row from HTML table using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- React Js- Fetch data from API with params
- React Js-Fetch data from API in functional component
- React Js- Fetch data from API using hooks
- React Js- Fetch data from API on button click
- [Simple Way]-Fetch data from API and display in table React Js
- [Simple Way]-How to display array data into tables in Reactjs
- Inline table editing with edit and delete icon in React Js
- [Simple Way]-How to create common helper class in React JS? | Fetch data from API using helper class and functions
- Simple React.js CRUD Example With Rest API
- [Simple Trick]-Hide Points in ChartJS Line Graph
- [Simple Trick]-How to Hide Some Points in ChartJS
- How to leave just points without lines in ChartJS
- How to Create Curved Lines Instead of Straight Lines in Chart.js?
- [Chart Js]- Straight Lines and Curves Lines in the Same Graph
- [Simple Trick]-Set Different Color For Each Bar in a Bar Chart in ChartJS
- [Simple Trick]-How to Combined Bar and line charts Using Chart.js?
- How to Create a Stacked Bar Chart Using Chart Js Example?
- [Simple Trick]-In Chart.js set Chart Title, Name of X axis and Y axis
- [Chart JS]- How to Make Sharp Lines to Smooth Curved Lines?
- [Simple Trick]-Stacked and Grouped Bar Chart Chart.js Example
- [Simple Trick]-How to display Grouped Bar Chart Using Chart Js?
- [Simple Trick]-Create a Multi Line Chart Using Chart.js
- [Simple Trick]-How to comment and uncomment blocks of code in the VBA Editor
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- Convert JSON data to HTML table using JavaScript
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- Replace image in word document using C#
- [Best Way]-How to display JSON data in HTML using Ajax
- Simple Way Find and replace text in Word document using C#
- Display JSON data in HTML table using JavaScript dynamically