[charts] How do I customize edges/radius on bar charts?

[mAllenBond]

The problem in depth

Hello!

I am trying to build out some charts with some design constraints that included rounded edges and gridlines. I'm aware that the gridlines feature is in progress, but I was wondering if I am missing something regarding applying rounded edges to a bar within a bar chart, e.g.:

I've played with a few props and style objects, but I can't seem to find any way to get the expected result. Here is a sandbox with what I would expect to input for modifying bar styles, but to summarize, given this:

<BarChart
      xAxis={[{ scaleType: "band", data: ["group A", "group B", "group C"] }]}
      series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
      width={500}
      height={300}
      slotProps={{
        bar: {
          radius: 8,
          style: {
            borderRadius: "8px",
          },
        },
      }}
    />

I would expect either radius or borderRadius to affect the edges of the bars in the chart. I noted that many other style customizations work perfectly, which made me suspicious that I'm missing something 😐

Is this currently not implemented, or is there some secret sauce? Any help would be greatly appreciated!

Your environment

`npx @mui/envinfo`

 Tested on Google Chrome
 
  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 4.0.2 - ~/.asdf/installs/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.asdf/installs/nodejs/18.16.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.69
    Edge: Not Found
    Firefox: 122.0
    Safari: 17.3.1
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.22 
    @mui/core-downloads-tracker:  5.15.11 
    @mui/icons-material: ^5.15.11 => 5.15.11 
    @mui/lab: ^5.0.0-alpha.166 => 5.0.0-alpha.166 
    @mui/material: ^5.15.11 => 5.15.11 
    @mui/private-theming:  5.15.11 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.11 
    @mui/types:  7.2.13 
    @mui/utils:  5.14.16 
    @mui/x-charts: ^6.19.5 => 6.19.5 
    @mui/x-data-grid:  6.19.5 
    @mui/x-data-grid-premium: ^6.19.5 => 6.19.5 
    @mui/x-data-grid-pro:  6.19.5 
    @mui/x-date-pickers:  6.19.5 
    @mui/x-date-pickers-pro: ^6.19.5 => 6.19.5 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.2.58 => 18.2.58 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.3 => 5.3.3 

Search keywords: bar charts radius rounded edges
Order ID: I'm filing this as a dev and don't have either of those things ^

[michelengelen]

@mbond-SCW this is currently only possible by adding rx and/or ry to slotProps.bar:

slotProps={{
  bar: {
    rx: 10,
    ry: 20,
  },
}}

But given the nature of these attributes you can only apply these to all corners.
Would that be sufficient for you?

@alexfauquette do we plan on adding more sophisticated styling/shaping possibilities to charts?

[alexfauquette]

I'm aware that the gridlines feature is in progress

It's done, available in the v7: https://next.mui.com/x/react-charts/axis/#grid

I noted that many other style customizations work perfectly, which made me suspicious that I'm missing something 😐

Yes, ll the styles should work. It's an SVG limitation. The only way to have those rounded corner is to render a <path /> instead of a <rect />.

do we plan on adding more sophisticated styling/shaping possibilities to charts?

We could create a slot component for the bars which uses a path instead of a rect to support rounded corner, but seems very edge case. For example Reachars does not propose such solution, and Nivo use the rx, ry you suggested.

Putting that as waiting for upvote

[mAllenBond]

I can work with that, ty!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@mAllenBond: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.