borderRadius is not working properly with type "Bar with Negative Values"
See original GitHub issueDescription
If you follow this exemple and you try to add a border raduis, it won’t work properly. The border radius is only applied to the left bars and not to the right bars.
My code :
var options = {
series: [
{
name: 'Males',
data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
3.9, 3.5, 3
]
},
{
name: 'Females',
data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
-4.1, -4, -4.1, -3.4, -3.1, -2.8
]
}
],
chart: {
type: 'bar',
height: 440,
stacked: true
},
colors: ['#008FFB', '#FF4560'],
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%',
borderRadius: 5 // Here is the issue ...
},
},
dataLabels: {
enabled: false
},
stroke: {
width: 1,
colors: ["#fff"]
},
grid: {
xaxis: {
lines: {
show: false
}
}
},
yaxis: {
min: -5,
max: 5,
},
xaxis: {
categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
'45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
'0-4'
],
title: {
text: 'Percent'
},
labels: {
formatter: function (val) {
return Math.abs(Math.round(val)) + "%"
}
}
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Steps to Reproduce
- Try the code below
Expected Behavior
All bars have rounded corners.
Actual Behavior
Only one side of the chart has bars with rounded corners.
Reproduction Link
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (7 by maintainers)
Top Results From Across the Web
Negative Border Radius in CSS? - Stack Overflow
Here's yet another way of doing it, this time using a radial background image. This lets it be transparent and works in both...
Read more >border-radius - CSS: Cascading Style Sheets - MDN Web Docs
Negative values are invalid. Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage ......
Read more >plotOptions.bar.borderRadius | highcharts API Reference
In bar type series it applies to the bars unless a color is specified per point. The default value is pulled from the...
Read more >CSS Box Shadow - CSS-Tricks
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box....
Read more >How To Style HTML Elements with Borders, Shadows, and ...
Second is that this will not work correctly with a percent-based value. Percent-based values on a border-radius property curve a percent of ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@plapointe6 Your idea worked perfectly and actually ended up being a new feature. You can now assign a border radius to a specific series in your chart. See PR #2614
@plapointe6 that’s a really good idea. Let me play around a bit and see how that works out.