Stacked bars' corners not rounded correctly

[szekelyisz]

Expected behavior

When a stacked bar chart's bars are set to rounded corners, the entire stack's outer borders should be rounded.

Current behavior

Depends on the borderSkipped attribute:

• if it's true, then no corners are rounded.
• if it's false, then only the lowest and highest value dataset's bar is rounded on all corners, not the entire stack's outer corners, creating a weird look.
• if it's absent, then the corners at the 0 value are not rounded.

Reproducible sample

https://codepen.io/szekelyisz/pen/GRPwbNV

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

Just trying to style a stacked chart.

chart.js version

4.4.0

Browser name and version

Firefox 118.0.1

Link to your project

https://github.com/szekelyisz/ffd-ui/

[etimberg]

The best way to achieve this would be to make the borderRadius property a function and determine when it needs to be non 0. For example #5413 (comment)

[etimberg]

The current behaviour of not rounding the border at the 0 mark I think is the correct built-in behaviour since that has been the most requested.

Another solution is to only add borderSkipped: false on the bottom bar in the stack, and then specify the corners for the border radius explicitly https://codepen.io/etimberg/pen/gOZZrpe

[szekelyisz]

Thanks @etimberg I didn't see that borderRadius can be an object also with explicitly set radius for each corner. Works perfectly now.