Customize the tooltip on a MUI X Charts graph

Question

I am building a distance versus elevation line chart from GeoJSON data, and I would like to edit the tooltip's style and content.

Specifically, I am wondering how to:

• have the tooltip in relative position underneath the graph in a more discreet way, rather than ovrlapping like it is right now
• round the distance value to 2 decimals
• remove the ',' thousands separator from the distance value
• add ' m' to the distance value

<LineChart
    margin={{ top: 5, bottom: 30, left: 55, right: 0 }}
    xAxis={[
        {
            min: Math.min(...xAxis),
            max: Math.max(...xAxis),
            data: xAxis,
            valueFormatter: (element) => `${element} km`,
        },
    ]}
    yAxis={[
        {
            tickNumber: 5,
            min: Math.min(...yAxis),
            max: Math.max(...yAxis),
            valueFormatter: (element) => `${element} m`,
        },
    ]}
    series={[
        {
            data: yAxis,
        },
    ]}
/>

Hoggish

Answer 1

1. have the tooltip in relative position underneath the graph in a more discreet way, rather than ovrlapping like it is right now

   That would be a great feature to do that with a single props. I created an issue to track progress on this idea

2. round the distance value to 2 decimals

   For that, the series config have a valueFormatter

3. remove the ',' thousands separator from the distance value add ' m' to the distance value

   That's solved with the valueFormatter too.

---

Here is a codesandbox with proposed solutions: https://codesandbox.io/p/sandbox/reverent-night-xfjytg?file=%2Fsrc%2FDemo.tsx%3A32%2C17

Webster