search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.79k stars 1.12k forks source link

[charts] Add documentation on border radius alternative for `BarCharts` #12859

Closed JCQuintas closed 1 week ago

JCQuintas commented 1 week ago

As @alexfauquette suggested on the previous PR in order to provide a quick alternative to borderRadius on bar charts, we can simply use css' clipPath property, which should be enough for most regular cases.

@alexfauquette not sure this "resolves" the issue at #12220, what do you think?

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

Screenshot 2024-04-19 at 20 15 59
mui-bot commented 1 week ago

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

Updated pages:

Generated by :no_entry_sign: dangerJS against ffbe421e96b7bb20232dbf314181c36c42b3f0ee

ishikachhabraa commented 1 week ago

what if we have stacking series? how will that case be handeled?

JCQuintas commented 1 week ago

what if we have stacking series? how will that case be handeled?

Right now it would apply the inset on every one of the items in the stack. So it wouldn't look very good.

Is adding border radius to a stacking bar chart important to you? We thought about documenting this workaround while we gather more info on this. Can you explain why it is important?

ishikachhabraa commented 1 week ago

what if we have stacking series? how will that case be handeled?

Right now it would apply the inset on every one of the items in the stack. So it wouldn't look very good.

Is adding border radius to a stacking bar chart important to you? We thought about documenting this workaround while we gather more info on this. Can you explain why it is important?

yes, as i was working one of my projects that required this particular design!

alexfauquette commented 1 week ago

It can work for stacking if you do not dynamically compute the stacking order and will be broken if the top bar has 0 height

https://codesandbox.io/p/sandbox/confident-danny-c7nsz2?file=%2Fsrc%2FDemo.tsx%3A8%2C16

image

JCQuintas commented 1 week ago

Looks pretty nice

If we were able to provide isExtremum and value to the ownerState we could support stacking the same way 🤔

I already have a working POC at https://github.com/mui/mui-x/pull/12834

needs cleanup and adjustments though