MUI图表如何突出显示特定的y轴刻度标签？

Question

我想通过在该标签的文本周围画一个圆圈来突出显示特定的 Y 轴刻度标签。

下面是我实现的条形图的代码，其中参考线为 y=2。现在，我想突出显示 Y 轴刻度标签中的值“2”。

import * as React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { ResponsiveChartContainer } from "@mui/x-charts/ResponsiveChartContainer";
import { BarPlot } from "@mui/x-charts/BarChart";
import { ChartsXAxis } from "@mui/x-charts/ChartsXAxis";
import { ChartsYAxis } from "@mui/x-charts/ChartsYAxis";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";

export default function BasicComposition() {
  return (
    <Box sx={{ width: "100%" }}>
      <Paper sx={{ width: "100%", height: 300 }} elevation={3}>
        <ResponsiveChartContainer
          series={[
            {
              type: "bar",
              data: [1, 2, 3, 2, 1],
            },
          ]}
          xAxis={[
            {
              data: ["A", "B", "C", "D", "E"],
              scaleType: "band",
              id: "x-axis-id",
            },
          ]}
          yAxis={[{ id: "left" }]}
          {...{ width: 500, height: 300 }}
        >
          <BarPlot />
          <ChartsReferenceLine
            y={2}
            axisId={"left"}
            lineStyle={{ strokeDasharray: "10 5", strokeWidth: 2 }}
          />
          <ChartsXAxis label="X axis" position="bottom" axisId="x-axis-id" />
          <ChartsYAxis label="Y axis" position="left" axisId="left" />
        </ResponsiveChartContainer>
      </Paper>
    </Box>
  );
}

以上代码输出 -> 输出

我需要在代码中进行哪些更改才能获得以下输出？

所需输出

有人可以帮助我实现所需的输出吗？

Answer 1

使用 mud 文档，特别是这个 example

您可以通过编程方式使用

tickLabelStyle

实现类似的目标

tickLabelStyle: {
  fill: (value) => value === highlightedValue ? "red" : "inherit",
  fontWeight: (value) => value === highlightedValue ? "bold" : "normal",
}