[charts] Support multiple values for border radius on bar charts

[joserodolfofreitas]

Summary

Currently, Bar charts support setting a uniform border radius for all corners of a bar, which applies the same curvature to the top-left, top-right, bottom-left, and bottom-right corners.
The idea is to introduce more flexibility by enabling separate radius values for each corner, thereby improving visual customization

Recharts solution is overall worst than ours, but they cover this aspect, and maybe we can follow the same behavior.

Main challenge

The point in the #12834 (comment) is that currently the border radius manages Negative & Positive values differently, eg: positive vertical values have no border radius on the bottom corners. If we allow for setting border radius for every corner, just like the border-radius css, how should we override the current behaviour?

Search keywords:
border-radius bar chart

[paolobiavati]

I have a similar problem: if you change the background-color of the column headers, when the toolbar is visible you can see the radius affect both the main container and the column header.

Can be reproduced in https://mui.com/x/react-data-grid#premium-plan
change the background-color of the div[role='row'] inside .MuiDataGrid-columnHeaders

in this image I manually change --unstable_DataGrid-radius to 16px (instead of 4px default) to to better highlight the problem.