Не всегда появляется Tooltip при наведении на Mark (точку) в LineChart от MUI

Я использую LineChart от MUI и мне необходимо сделать кастомный Tooltip при наведении на Mark (точку), но почему-то он не всегда появляется, хоть и наводим прямо на точку. Чаще всего для точек прямо снизу и сбоку не показывается Tooltip.

Дополнительно хотелось бы, чтобы выделялась только точка на которую навели, а не все точки в столбике. Вроде бы triger: "item" должен делать именно это.

import { Box } from "@mui/material";
import { LineChart } from "@mui/x-charts/LineChart";

const graph = {
  columns: ["col 1", "col 2", "col 3", "col 4", "col 5"],
  data: [
    [8000, 17000, 40000, 9000, 32000],
    [23000, 21000, 1000, 6000, 4000],
  ],
};

export default function BasicArea() {
  return (
    <LineChart
      height={300}
      tooltip={{ trigger: "item" }}
      slots={{
        itemContent({ itemData, series }) {
          if (itemData.dataIndex === undefined) {
            return null;
          }

          return (
            <Box
              sx={{
                padding: "10px",

                backgroundColor: "#FFFFFF",
                boxShadow: "0 1px 7px 0 rgba(73, 70, 70, 0.15)",

                display: "flex",
                flexDirection: "column",
                gap: "5px",
              }}
            >
              value: {series.data[itemData.dataIndex]?.toString()}
              <br />
              column: {graph.columns[itemData.dataIndex]}
            </Box>
          );
        },
      }}
      series={[
        {
          BasicArea: "",
          curve: "linear",
          id: "left-branch",
          data: graph.data[0],
          color: "orange",
        },
        {
          curve: "linear",
          id: "right-branch",
          data: graph.data[1],
          color: "green",
        },
      ]}
      axisHighlight={{ x: "none" }}
      xAxis={[
        {
          data: graph.columns,
          scaleType: "point",
          tickPlacement: "middle",
          tickLabelPlacement: "tick",
        },
      ]}
      sx={{
        "& .MuiLineElement-root": {
          strokeWidth: "3px",
        },
      }}
    />
  );
}

Edit cocky-volhard-76fpmf


Ответы (1 шт):

Автор решения: Oliver Patterson

Исправленно в верссии v7.11.1.

→ Ссылка