[charts] Charts Legend does not have ability to customize by individual legend item

[MMShep97]

The problem in depth

original issue with information: #15560

Hi there! Not sure if this is just a docs update for someone who couldn't figure out the advanced case, or actually a feature request. Thanks in advance!

Legend does not have the ability to customize individual legend items -- specific aim is to make the legend a dotted line just like the line on the graph. I know you can customize every item the same, like in these docs, but not individual pieces. See the image below for the expected/wanted functionality:

https://codesandbox.io/p/sandbox/flamboyant-pine-9249sn

Not a bug, just a reproduction of my current code!

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 15.1
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 9.11.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 131.0.2903.63
    Safari: 18.1
  npmPackages:
    typescript: 5.6.3 => 5.6.3 

Search keywords: legend itemMark mark series dotted strokeDasharray charts chart
Order ID: 0332927583

[michelengelen]

Hey @MMShep97 and thanks for opening an issue here.
I will add this to the board as an enhancement to an existing feature.
It makes sense to have opt-in individual customization IMHO. 👍🏼

[alexfauquette]

You can target items for a specific series with .MuiChartsLegend-series-five-year-average .MuiChartsLegend-mark

Each legend element has a class MuiChartsLegend-series-[seriesId] on the same idea that the one you used to add dash style to the line chart.

But that will not solve your issue because the items are <rect/> and not line or path so dash-array will not apply.

In this issue, I see two aspects we plan to solve in V8:

• The default behavior: The item does not align with the series type. For line series we should display a line with a mark is the series has mark.
• The customization which is too complex. The plan for v8 is to transform the legend into a picec of HTML instead of rendering it directing in the SVG, such that creating your own legend should be easy. Here is a preview (https://deploy-preview-15511--material-ui-x.netlify.app/x/react-charts/components/#html-components)

[alexfauquette]

I'm closing this issue, because the new legend is available on the next version: https://next.mui.com/x/react-charts/legend/

@MMShep97 We would be interested to get your opinion on it. If you still see some blocking aspects for your use-case.

Don't hesitate to open an new issue linking to this one such that we refine the API

[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.

Note

@MMShep97 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.