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

[MMShep97]

Related page

https://mui.com/x/react-charts/legend/

Kind of issue

Missing information

Issue description

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!

Here is a link to a reproduction of my current code (has many commented lines of attempts :P)

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:

Attempts at a solution:

• using slotProps, slots, both on the individual LineGraph, and also composing with ChartContainer and ChartsLegend -- there might be a solution there, but I couldn't quite figure it out. I kept thinking I could get to the solution with slotsProps.legend.seriesToDisplay and customizing the individual items that way, but the props on that aren't customizable enough. CSS also doesn't have css class customizability down to the series like line graphs do (example ['.MuiLineElement-series-{specific series id}']: { strokeDasharray: '10 5', ...plus some other svg modifiers},
• using <ChartsLegendItem /> (even though it's an 'internal component', this might work, but it's obviously not the correct solution)

Context

what I have

vs.

what I want

As the line for five year average is dotted, I would like the legend for it to also be dotted. The more general want I suppose is to have the ability to customize each individual legend item.

Search keywords: legend itemMark mark series dotted strokeDasharray charts chart

[MMShep97]

I now realize I could have entered in the order id for premium support -- not sure how I go about updating that in this issue, or if I would have to create a new issue, but I will wait and see if this gets timely traction! :)

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