feat: add borderRadius to bar charts. Closes #7701

[danmana]

Implemented border-radius for bar charts. Closes #7701

Support for stacked bar charts is not something trivial to add, so it's not included in this PR.
I tried looking into it, but we depend on borderSkipped for the implementation, and it doesn't work as expected for stacked bar charts: it skips a border in each rectangle from a stack, but we would need it to skip two borders for the middle rectangles and one border for the bottom of the stack.

One of the visual tests was failing due to a small, imperceptible, antialiasing difference between ctx.fillRect() and ctx.rect(); ctx.fill() (tested on Chrome). The change was done for code consistency between rounded and non-rounded rectangles.
I updated the fixture to match this.
Actual:

Expected:

Diff:
The difference was found only in two places, so it's not something consistent, but probably caused by anitaliasing. For reference the diff is 1 px tall and has colors: #cbcbcb and #cacaca

[etimberg]

Thanks for the very thorough PR! It's great to see that you included the Typescript changes and everything.

Would it be possible to add a few image based tests of this behaviour? That way we can be sure that it doesn't break in the future

[kurkle]

Well done!

[danmana]

Would it be possible to add a few image based tests of this behaviour?

Sure 👍

[levipadre]

Hi,
I would love this feature. When can I expect it?

[danmana]

When can I expect it?

It should already be available in 3.0.0-beta5 - see sample and docs

[levipadre]

Thanks, great! Can you estimate release date?

[danmana]

It is already released. npm i -s [email protected] https://www.npmjs.com/package/chart.js/v/3.0.0-beta.5

[levipadre]

Sorry, I meant officially. When will it become the latest? Roughly?

[danmana]

I have no idea when 3.0 will go out of beta, I'm not one of the chart.js developers, I just made this PR.
You should follow #6598

[levipadre]

Sorry then, but thanks for the help