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/
4.12k stars 1.28k forks source link

[charts] Bar chart borderRadius not applied on Firefox #14690

Open subk opened 2 weeks ago

subk commented 2 weeks ago

Steps to reproduce

Link to live example: https://mui.com/x/react-charts/bars/#border-radius

borderRadius property of <BarPlot /> is not working in Firefox. SVG clip-path looks correct but is ignored by FF.

Current behavior

Firefox Developer Edition 131.0b8 (64-bit) image

Firefox ESR 115.15.0esr image

Expected behavior

Using Chrome Version 129.0.6668.58 (64 bits) image

Context

No response

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: barchart, borderRadius, firefox

alexfauquette commented 2 weeks ago

I duplicated the component in the <clip-path /> and it seems the error come from FF that do not apply the clip-path attribute of the rectangle when clipping the staked bars

Here is in red the the content of <clip-path />. As you can see the clip-path: inset(0px round 10px); rule is respected. But not when using this shape as a clip-path.

image

A workaround could be to define this shape with a <path />

subk commented 1 week ago

As a workaround I was using a clip-path on the bar slot : 

// example
<BarPlot
  slotProps={{
    bar: { clipPath: `inset(0px round 5px 5px 0px 0px)` },
  }}
/>

Note that it will not work for stacked bar chart