Не всегда появляется 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",
},
}}
/>
);
}