[charts] Rounded corners on BarChart

[JCQuintas]

Initial Proposal

• We can use clip-path: inset() to easily make round corners

  • https://caniuse.com/css-clip-path
  • https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

• Result https://codesandbox.io/p/sandbox/mui-mui-x-x-data-grid-forked-jt6jxh?file=%2Fsrc%2Fdemo.tsx%3A7%2C6

Docs

https://deploy-preview-12834--material-ui-x.netlify.app/x/react-charts/bars/#border-radius

resolves #12220 resolves #12947

Todo

• [x] Support horizontal bars
• [x] Support bars with both negative and positive values
• [x] Support small bars (should we disable? decrease? figure a proportion?)
• [x] Types documentation
• [x] Examples

[mui-bot]

Deploy preview: https://deploy-preview-12834--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/bars/bars.md

Generated by :no_entry_sign: dangerJS against 7ddb5d7c95d1c5e112c53c4f7d1d2ef2db9f0554

[JCQuintas]

@alexfauquette can you take a look at the code again? Documentation is still missing, but I want to be sure I'm on the right path before documenting the behaviours.

https://codesandbox.io/p/sandbox/mui-mui-x-x-charts-rounded-corners-lvgmlc?file=%2Fsrc%2Fdemo.tsx%3A155%2C22

It took me a while to figure out how the mask could work with the animation, but the trick was to animate everything together 😅, there are some unnecessary masks, but I don't think they should be a problem.

There were two options I could go for in terms of masking

• Mask the entire column, approach a I chose.
• Mask only the last item in a column.

I chose to mask the entire column as I assume it gives more flexibility to the radius, as you can really make the columns round, although you probably shouldn't. If we put the mask only on the last item, if the item is very small or non-existant it would probably break and we would need more logic to figure everything out. Only drawbacks I see is that we have to use one mask for every segment, rather than one for the entire column, but it works and animation is aligned. Another "drawback" but this would be in any solution, is that if the "column" is smaller than the chosen radius, it will "clamp" the radius to the height of the column, which might look odd, but there is no other way around it.

[JCQuintas]

from SVG with the following structure

codesandbox example

It doesn't work if we have multiple charts in the same page that have the same id/order. That was my first attempt actually. But svg ids follow the same rules as HTML, and are unique to the entire page.

I can just use useChartId which generates a unique id for each chart 😅

[JCQuintas]

@noraleonte @LukasTy I believe I addressed most if not all of @alexfauquette points. So please review when possible.