[charts] Explanation of tooltip value formatting

[mAllenBond]

Related page

https://next.mui.com/x/react-charts/tooltip/

Kind of issue

Missing information

Issue description

Use case:

I have a chart, and I have axis values, and I want to embellish those values in the tooltip, which seems like a pretty common use case. I achieved this via axisContent.axis in slotProps.

Example sandbox here

Screenshot

Issue:

What I haven't seen is any information in the docs explaining how to do exactly this, or even if the approach in the sandbox example is correct (As an aside, I get a type error when doing this in my dev env, and the object it expects for the axis seems incorrectly typed). The information around overriding/customizing tooltips in general is pretty opaque, but I'm pretty certain this is a very common use case.

I think a simple demo around this and some docs would be really helpful.

Context

Add a documentation snippet for customizing/embellishing axis content in the tooltip in MUI Chart Tooltip docs without overriding the whole tooltip component, ALA Sandbox

Search keywords: charts tooltip

[michelengelen]

Hey @mbond-SCW and thanks for raising this issue.
I did add this to our board for the team to take a look!
Thanks again! 🙇🏼

[alexfauquette]

You might be interested by the feature in #12172 and documented here: https://next.mui.com/x/react-charts/axis/#axis-formatter

Basically your axis.valueFormatter will get a context in second argument allowing you to to

axis.valueFormatter = (value, context) => 
  context.location === 'tooltip' ?
    `Id do what I want ${value}`
    : value.toString()

But I agree documenting it in the tooltip page is a good idea

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

@mbond-SCW: 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.