I saw this post on GitHub about rounded bar charts (https://github.com/apexcharts/apexcharts.js/issues/422) and was wondering how to round the bottom of the chart I am using version 3.27.3. I want my charts to look like this: Sausage Chart And at the moment they look like this Bar Chart As you can see the bottom part is not rounded
These are my options:
chart: {
background: "transparent",
foreColor: "#333",
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
legend: {
show: false,
},
grid: {
show: false,
},
xaxis: {
categories: [],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
show: false,
},
},
yaxis: {
labels: {
style: {
colors: ["#FFFFFF"],
fontSize: "12px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 500,
cssClass: "apexcharts-yaxis-label",
},
},
},
plotOptions: {
bar: {
horizontal: false,
borderRadius: 7,
columnWidth: "25%",
barHeight: "70%",
},
},
fill: {
colors: ["#FFFFFF"],
},
dataLabels: {
enabled: false,
},
title: {
text: undefined,
},
});
You need to add the property borderRadius: 30 (or number that you want) inside of the options properties
options: {
plotOptions: {
bar: {
borderRadius: 30,
// borderRadiusApplication: 'end',
// borderRadiusWhenStacked: 'last',
}
}
}
You can also play using borderRadiusApplication and borderRadiusWhenStacked all those properties can be used from version 3.26 and above
you can find more info here https://apexcharts.com/docs/options/plotoptions/bar/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With