[charts] Not getting the data for target values in itemContent callback for customizing tooltip

[Abhishek332]

Steps to reproduce

Link to live example: (required)

Steps:

1. use slots props in LineChart component for customizing the tooltip, I used these props

     tooltip={{
       trigger: "item",
     }}
     slots={{
       itemContent: (params: any) => {
         console.log("params", params);
         const { itemData, series } = params; //item data can be used to create the tool tip value
         return (
           <div className="p-2 rounded-lg shadow-md bg-white text-gray-700">
             <p>Abhishek</p>
           </div>
         );
       },
     }}

2. In itemContent params we not get any info for the item that hover, see the params I get in itemContent callback.

{
    "itemData": {
        "type": "line",
        "seriesId": "auto-generated-id-0"
    },
    "series": {
        "id": "auto-generated-id-0",
        "color": "#7262F6",
        "disableHighlight": false,
        "type": "line",
        "dataKey": "sensitive_data_blocked",
        "data": [
            0,
            0,
            1,
            1,
            1,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            0,
            0
        ],
        "stackedData": [
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                1
            ],
            [
                0,
                1
            ],
            [
                0,
                1
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                1
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ],
            [
                0,
                0
            ]
        ]
    },
    "sx": {
        "mx": 2
    },
    "classes": {
        "root": "MuiChartsTooltip-root",
        "table": "MuiChartsTooltip-table",
        "row": "MuiChartsTooltip-row",
        "cell": "MuiChartsTooltip-cell",
        "mark": "MuiChartsTooltip-mark",
        "markCell": "MuiChartsTooltip-markCell",
        "labelCell": "MuiChartsTooltip-labelCell",
        "valueCell": "MuiChartsTooltip-valueCell"
    },
    "ownerState": {}
}

Current behavior

In itemContent callback props, not getting any data which help to identify which item is hovered in series

Expected behavior

There should be some information, may be the item index or something by using that I can get the value for hovered item, and create customize tooltip and show the value

Context

I was ploting LineChart, In tooltip by default it shows on numeric value, I want to customize the date format, as well as want to show the unit after the numeric values.

Your environment

npx @mui/envinfo

I used chrome browser. ``` System: OS: macOS 14.1.1 Binaries: Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm pnpm: Not Found Browsers: Chrome: 128.0.6613.84 Edge: 128.0.2739.42 Safari: 17.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.21 @mui/material: 5.15.21 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-charts: ^6.18.3 => 6.19.8 @types/react: 18.2.21 => 18.2.21 react: 18.3.0 => 18.3.0 react-dom: 18.3.0 => 18.3.0 typescript: 5.4.5 => 5.4.5 ```

Search keywords: LineChart

Search keywords:

[michelengelen]

Hey @Abhishek332 ... which version of the charts package are you using? It works for me if using the docs example.

It would be great if you could provide us with a working live example in codesandbox or stackblitz!

[alexfauquette]

@Abhishek332 If all you want is to format the date and the values, you can use the valueFormatter

See this demo which add the currency to values and only pick the year of the date https://mui.com/x/react-charts/tooltip/#formatting

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.