如何在MUI Charts中高亮特定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>
  );
}

修改方案 #

通过自定义Y轴的tickFormatter，结合JSX给目标刻度添加圆形背景，具体修改如下：

1. 在ChartsYAxis组件中添加tickFormatter属性，自定义刻度渲染逻辑
2. 对值为2的刻度，返回带圆形背景的JSX元素，其他刻度保持原样

修改后的完整代码：

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() {
  // 自定义刻度格式化函数
  const yTickFormatter = (value) => {
    if (value === 2) {
      // 给值为2的刻度添加圆形背景
      return (
        <Box
          sx={{
            borderRadius: "50%",
            backgroundColor: "#ffd700", // 金色背景，可按需调整
            padding: "4px 8px",
            fontWeight: "bold",
          }}
        >
          {value}
        </Box>
      );
    }
    return value;
  };

  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" />
          {/* 添加tickFormatter属性 */}
          <ChartsYAxis 
            label="Y axis" 
            position="left" 
            axisId="left" 
            tickFormatter={yTickFormatter} 
          />
        </ResponsiveChartContainer>
      </Paper>
    </Box>
  );
}

关键说明 #

• tickFormatter函数接收刻度值作为参数，判断是否为目标值2
• 使用MUI的Box组件实现圆形背景，通过sx属性设置圆角、内边距、背景色等样式，可根据需求调整
• 非目标刻度直接返回原始值，不改变原有样式

内容的提问来源于stack exchange，提问作者Naruto81