if you are looking for javascript charting libraries that supported grouped bar charts, then you have come to the right place. In this article, we are going to create a Grouped bar chart using the chart.js’ javascript library. if you are thinking Is it possible to do grouped bar charts using chart.js? then answer is yes and it’s very simple.
Using ChartJS to create a multiple grouped bar chart Example
we can provide multiple datasets using the datasets property of the chart js, as we know that datasets are an array containing data for each bar chart. Every dataset contains a series of values in data that are related to the labels.
If you are very new to using ChartJs then don’t worry this article is for you, if you are having difficulties with making a grouped bar chart that using ChartJs then don’t worry just look below example.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Bar Chart Using Chart.js </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="GroupedbarChartcanvas" style="width:100%;"></canvas>
</div>
<script>
var GroupedbarChartData = {
labels: [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2023",
"2022"
],
datasets: [
{
label: "JavaScript Developer'",
backgroundColor: "pink",
borderColor: "pink",
borderWidth: 1,
data: [50, 55, 66, 87, 83, 75, 96, 72]
},
{
label: "React Developer",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [44, 27, 63, 96, 100, 57, 34, 56]
},
{
label: "Chart Js Developer",
backgroundColor: "green",
borderColor: "green",
borderWidth: 1,
data: [100, 47, 44, 76, 59, 77, 53, 88]
}
]
};
var BarchartOptions = {
responsive: true,
legend: {
position: "top"
},
title: {
display: true,
text: "Chart.js Bar Chart"
}
}
window.onload = function ()
{
var chartData= {
type: "bar",
data: GroupedbarChartData,
options: BarchartOptions
}
new Chart("GroupedbarChartcanvas", chartData);
};
</script>
</body>
</html>
Code Explanation
The GroupedbarChartData is the variable that contains all the data and styling properties of the Grouped Bar Chart graph. It is a javascript object with multiple properties to create the Grouped Bar Chart.
The labels property in GroupedbarChartData variable is an array that represents the x-axis points in the Bargraph and the datasets property is also an array that contains information such as Bar Chart title, backgroundColor,borderColor, label, and data is an array that represents the Y-axis values of Bar graph.
Now what’s awesome about this is that this is HTML, this is responsive, it’s using canvas. There are eight different chart types and it’s totally open source. So I can’t imagine a reason why you wouldn’t want to use this project over some other charting solutions. Now there are things like D3, D3 is an amazing package in the ecosystem. However, D3 is going to be overkill if you need a simple chart like one of these.
And these charts aren’t even that simple, to be honest. But if you need a chart, you know, learning D3 is great. if you need advanced visualizations, then D3 is probably going to be more up your alley. But if you’re just doing beautiful charts, check out chart js.
Really, all that matters is that you load this and you have someplace to write JavaScript that is going to be recognized by this HTML document. Okay, let’s head back to the browser from Charjs.org. You’re going to see that we have documentation.
Before we check out documentation, you can see that we have some cool stuff in chart. Js. We have mixed chart types where you can have bar charts on top of whatever line charts . we have things like different chart axes where you can move the axes to be inverse or something like that. And you can animate everything.
And you could see just how beautiful the bar chart is And honestly, you can make them more beautiful if you hate them. So we can also make a radar chart, which is something you might see to describe attributes. We have a polar area chart which is sort of like a pie chart, but it adds an extra dimension where you can have this branching out here.
The post [Simple Trick]-How to display Grouped Bar Chart Using Chart Js? appeared first on Software Development | Programming Tutorials.
Read More Articles
- LINQ group by datetime and sum | Linq get sum of data group by date
- Linq group by multiple columns and sum | Select multiple fields group by and sum
- Entity framework Group By:Sum,Count,Min ,Max example
- Linq to SQL Group by and Sum in Select | Linq To SQL Group By and Sum
- [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 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#