How to Create Horizontal Bar Charts (Stacked) in Chart.js
Chart.js is the most feature rich data visualization tool. You can use it for creating awesome charts. Unlike most other similar tools in the market, chart.js is completely free to use. Despite that, it is not lacking in terms of features and usability. You do not need to be a master of javascript to use it. However, some knowledge of javascript is definitely useful.
Chart.js is the most popular charting library based on github stars (~ 60,000) and npm downloads (~2,400,000 weekly). It was created in 2013 and has evolved a lot since then. Moreover, there is an active community that maintains chart.js.
In some previous posts, we have discussed how to use chart.js to create various types of charts like bar charts, line charts, pie charts, and similar more types of charts. You can display these charts by inserting the script into the html body of your website.
We will discuss how to create a horizontal bar chart in chart.js in this post. You can create simple horizontal bar charts as well as stacked horizontal bar charts in chart.js.
Install chart.js
If you are not familiar with the installation process, you can easily install it using a cdn link or npm. However, if you have it installed already, you can move on to the next section.
To install, chart.js you can include the cdn link in the form of a script in your website header. The script below will install chart.js version 4.4.0 on your website.
<script src=" https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js
"></script>
Otherwise, you can install it using npm:
npm install chart.js
So, this is how you can easily install chart.js on your website and start creating beautiful charts in chart.js.
Creating horizontal bar charts in chart.js
The process of creating horizontal bar charts in chart.js is fairly similar to that of creating simple bar charts. With just a few more customizations, you can convert a simple bar chart into a horizontal bar chart.
Here is what the script to create a simple bar chart looks like:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes in 2022', backgroundColor: 'lightseagreen',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13]},
]
},
options: {
plugins:{ tooltip:{mode: 'index'},
datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10}},
},
scales: {
y: {
beginAtZero: true,
}
}
}
});
</script>
We have used two datasets in the above script. You can create one with a single or more than two datasets also. The above code will output a simple bar chart.
%20(1).png)
To convert the above chart into a horizontal chart, all you need to do is to set indexAxis to ‘y’ in the following manner:
Options: { indexAxis: ‘y’
},
The entire code will now look like this:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes in 2022', backgroundColor: 'lightseagreen',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13]},
]
},
options: { indexAxis: 'y',
plugins:{ tooltip:{mode: 'index'},
datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10}},
},
scales: {
y: {
beginAtZero: true,
}
}
}
});
</script>
This will output a horizontal bar chart that looks like the following:
%20(1).png)
We have used two datasets in this chart. If you want, you can also convert the horizontal bar chart into a stacked horizontal bar chart in the same manner as you convert the vertical bar charts to stacked. You just need to set the stacked property to true for both the axes.
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes in 2022', backgroundColor: 'lightseagreen',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13]},
]
},
options: { indexAxis: 'y',
plugins:{ tooltip:{mode: 'index'},
datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10}},
},
scales: {
x: {stacked: true,},
y: {
beginAtZero: true, stacked: true,
}
}
}
});
</script>
Now, you have a horizontal stacked bar chart ready with data labels and tooltip. By setting the tooltip mode to index, we have included the values from both datasets in the same tooltip.
%20(1).png)
RELATED