Skip to content

borderRadius not rendering on iOS Safari (WebKit) with vertical bar charts #5076

@maxvanweenen

Description

@maxvanweenen

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

Image On android. works as intended. Image On Iphone. Borders are not rounded.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions