How to Add Border-Radius to Stacked Bar Chart in Chart.js
Add Border radius to each Stacked bar in Chart.js
Chart.js is the most popular javascript charting library based on nom downloads and github stars. While most javascript libraries are quite complex to use, chart.js makes it easy to draw attractive charts in various formats.
You do not need to be a master of javascript to use chart.js. Some basic knowledge of javascript would do for drawing basically the most used forms of charts, even the ones involving large datasets.
You can easily draw bar charts, line charts, pie chart, mixed charts and doughnut charts in chart.js. Just install the chart.js library on your server using npm or by adding the cdn link to the header of the website and you can start drawing charts.
In this tutorial, we will discuss how to add border radius to each of the stacked bars in chart.js. In a previous tutorial, we have discussed how to draw stacked bar charts. With some more customizations, you will be able to add border radius to each bar in a stack.
Install Chart.js
To install chart.js you can install it on your server using npm or on a single website using the header script that includes the chart.js cdn link. The cdn link method is the most popular and widely used method. You just need to add the following script to your site header to install and use chart.js library.
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js
"></script>
The latest version of chart,js is chart.js 4.4.2. So, if you want to install the latest version, you can grab the link from chart.js website.
If you want to install it on your server, you can do so using npm.
npm install chart.js
How to add border radius to each stacked bar in chart.js
If you have used chart.js previously to draw a stacked bar chart, you know that you need to set the stacked property to true for both the axes to create a stacked bar chart from a normal bar chart with two or more datasets.
When we create a normal bar chart with two or more datasets, the bars are placed side by side. However, they are stacked upon each other when we create a stacked bar chart.
As in the case of border radius, the general method is to specify the border radius in pixels. However, it works in the case of normal bar charts and not in the case of stacked bar charts since you will only have a border radius at the top.
If you want you can give each corner of each stacked bar a border radius through some customizations. We can apply a border radius to each corner of the rectangular bars separately. However, we will also need to set ‘border skipped’ to false for each dataset.
When borderRadius is a number, it is applied to all the corners except the border skipped. However, you can specify topLeft, topRight, bottomLeft and bottomRight (use object syntax instead of a number) to define the borderRadius for each corner. Applying borderRadius as a number to a stacked bar chart applies the borderRadius to only the bar at the edges.
You can override this behavior through the use of object syntax for borderRadius. We want to apply borderRadius to all corners. However, we know that the corners touching the borderSkipped will be skipped or will not have a borderRadius. To ensure that no corner is skipped, we need to set borderSkipped to false.
Now, let’s draw a stacked bar chart and try adding a borderRadius to each stacked bar. To do that, let’s first draw a stacked bar chart.
<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, 13, 13, 15, 12, 13],
borderColor: 'black',
borderWidth: 1,
},
{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13],
borderColor: 'black',
borderWidth: 1,
},
]
},
options: {
plugins:
{datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10, weight: 'bold'}},
},
scales: {
x: {stacked: true},
y: {
beginAtZero: true, stacked: true
}
}
}
});
</script>
The above code outputs a normal stacked bar chart without any borderRadius.
.webp)
However, to add borderRadius to each stacked bar, we need to add the following to each of the two datasets used in the above chart:
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
By setting borderSkipped to false, we will ensure that no corner is skipped and borderRadius is applied to all the four corners and then we apply equal borderRadius to each corner.
So, now our code to draw the same chart with borderRadius looks like the following:
<div>
<canvas id="myChart1"></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('myChart1');
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, 13, 13, 15, 12, 13],
borderColor: 'black',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13],
borderColor: 'black',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
]
},
options: {
plugins:
{datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10, weight: 'bold'}},
},
scales: {
x: {stacked: true},
y: {
beginAtZero: true, stacked: true
}
}
}
});
</script>
And it outputs a chart looking like the following:
.webp)
The border in the middle is looking very thick in it and to make it look more clear and so that there is some space between the two bars forming a stack, we can change the borderColor from solid black to transparent.
<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, 13, 13, 15, 12, 13],
borderColor: 'transparent',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
{label: '# of Votes in 2023', backgroundColor: 'lightpink',
data: [22, 29, 13, 15, 12, 13],
borderColor: 'transparent',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
]
},
options: {
plugins:
{datalabels: {align: 'top', anchor: 'middle', color:'black', font: { size: 12, weight: 'bold'}},
},
scales: {
x: {stacked: true},
y: {
beginAtZero: true, stacked: true
}
}
}
});
</script>
.webp)
Now, we have the final chart ready in its desired form. However, we will try the same with three datasets (three bars in each stack).
<div>
<canvas id="myChart1"></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('myChart1');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes in 2022', backgroundColor: 'seagreen',
data: [12, 13, 13, 15, 12, 13],
borderColor: 'transparent',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
{label: '# of Votes in 2023', backgroundColor: '#401F71',
data: [22, 29, 13, 15, 12, 13],
borderColor: 'transparent',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
{
label: '# of Votes in 2024', backgroundColor: '#004721',
data: [8, 9, 8, 9, 8, 9],
borderColor: 'transparent',
borderWidth: 1,
borderSkipped: false,
borderRadius: {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight:10},
},
]
},
options: {
plugins:
{datalabels: {align: 'top', anchor: 'middle', color:'white', font: { size: 12, weight: 'bold'}},
},
scales: {
x: {stacked: true},
y: {
beginAtZero: true, stacked: true
}
}
}
});
</script>
We again get an attractive looking stacked bar chart with three bars in a stack and with borderRadius.
%20(1).png)
If we want, we can change the same to a horizontal stacked bar chart by setting the indexAxis to y.
.webp)
And we still have an awesome loking horizontal stacked bar chart.
Suggested Reading