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