I need a Highcharts bar chart with both ends (left and right) rounded, so I tried the config below, but only the right end of the bars is rounded.
I expected both ends to be rounded, as some Stack Overflow answers suggest that borderRadius: 8 should apply to both. However, in my case, only the right end is rounded.
Am I missing something? Is there a workaround for this?
const data = [
{ category: 'Apples', value: 10 },
{ category: 'Bananas', value: 15 },
{ category: 'Oranges', value: 8 },
{ category: 'Grapes', value: 12 },
{ category: 'Peaches', value: 5 },
];
const chartOptions = {
chart: {
type: 'bar', // Horizontal bars
height: 400,
clip: false,
},
title: {
text: 'Simple Horizontal Bar Chart',
},
xAxis: {
categories: data.map(item => item.category), // Labels for each bar
title: {
text: 'Categories',
},
},
yAxis: {
title: {
text: 'Values',
},
},
plotOptions: {
series: {
borderRadius: 10, // ✅ Rounded edges on both ends
pointPlacement: 'between',
},
},
series: [
{
name: 'Data',
data: data.map(item => item.value), // Numeric values for bars
},
],
legend: {
enabled: false,
},
};
Under this API doc you have link to example how to control border radius on both ends: https://api.highcharts.com/highcharts/series.column.borderRadius
Here is your config updated in relevant places:
{
chart: {
...,
events: {
load() {
const chart = this;
chart.update({
plotOptions: {
series: {
borderRadius: {
where: "all",
},
},
},
})
},
},
},
...,
plotOptions: {
series: {
borderRadius: {
radius: 10,
},
},
},
...
}
I hope you will find it useful.
Best,