-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
Description
When using plotOptions.bar.borderRadius with a vertical bar chart in ApexCharts, rounded corners appear correctly in most browsers — except on iOS Safari (and any WebKit-based iOS browser).
The same configuration works fine on:
Desktop Chrome/Firefox
Android browsers (including Chrome mobile and Android emulation)
But fails in:
Safari on iOS (iPhones and iPads)
Chrome on iOS (due to enforced WebKit)
Steps to Reproduce
Open this CodePen in an iOS device or emulated Safari mobile device
https://codepen.io/Travinns/pen/bNVGWEL
Observe that all bars appear square (The bars not the background bars)
Open the same CodePen in Chrome (desktop or Android emulation)
Observe that bars are correctly rounded
Expected Behavior
Bars should have rounded corners (via borderRadius) on all platforms, including iOS Safari.
Actual Behavior
On iOS Safari (and iOS Chrome), the bars appear with sharp, square corners even though borderRadius is applied.
Screenshots


Reproduction Link
https://codepen.io/Travinns/pen/bNVGWEL
This is a minimal Vue ApexCharts setup that shows the issue clearly. works on desktop/Android, but not on iOS Safari.