如何缩小MUI X Line Chart的y轴标签间距并生效自定义y轴值？

• 需求：让MUI X Line Chart与设计稿样式完全匹配
• 现存问题：
  • 自定义设置的左侧Y轴标签值始终不生效，无法修改显示数值
  • 增大图表高度时，Y轴标签会以2的倍数增加，标签垂直间距过大
• 咨询需求：如何缩小Y轴标签间距，同时让自定义Y轴数值正常生效

设计稿对比 #

正确样式：
当前样式：

代码示例 #

import React from "react";
import { Box } from "@mui/material";
import { LineChart } from "@mui/x-charts/LineChart";
import "../../assets/sass/components/_performance-chart.scss";

const uData = [75, 60, 45, 65, 80, 50];
const pData = [60, 80, 60, 80, 100, 75];
const xLabels = [" ", "9 AM", "12 PM", "15 PM", "18 PM", "19 PM"];
const yLabels = [35, 45, 60, 75, 90, 105, 120];

const Chart = () => {
  return (         
    <Box className="performance-chart">
      <LineChart
        width={389}
        height={238}
        series={[
          {
            type: "line",
            data: pData,
            label: "pv",
            area: true,
            showMark: false,
            stack: "pv",
          },
          {
            type: "line",
            data: uData,
            label: "uv",
            area: true,
            showMark: false,
            stack: "pv",
          },
        ]}
        grid={{ horizontal: true }}
        xAxis={[{ scaleType: "point", data: xLabels }]}
        yAxis={[{ scaleType: "linear", data: yLabels }]}
        slotProps={{ legend: { hidden: true } }}
        sx={{
          display: "flex",
          width: "389px",
          height: "100%",
          paddingRight: "6px",
          alignItems: "flex-start",
          gap: "10px",
          flexShrink: 0,
          "& .MuiLineElement-root": {
            strokeWidth: 2,
          },
          "& .MuiMarkElement-root": {
            scale: "0.6",
            fill: "#fff",
            strokeWidth: 2,
          },
          // 左侧Y轴标签样式
          "& .MuiChartsAxis-left .MuiChartsAxis-tickLabel": {
            fill: "#7E8299",
            fontFamily: "Inter",
            fontSize: "13px",
            fontStyle: "normal",
            fontWeight: "600",
            lineHeight: "14px",
          },
          // 底部X轴标签样式
          "& .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel": {
            fill: "#7E8299",
            fontFamily: "Inter",
            fontSize: "13px",
            fontStyle: "normal",
            fontWeight: "600",
            lineHeight: "14px",
          },
          // 底部轴线样式
          "& .MuiChartsAxis-bottom .MuiChartsAxis-line": {
            stroke: "#7E8299",
            strokeWidth: 0,
          },
          // 左侧轴线样式
          "& .MuiChartsAxis-left .MuiChartsAxis-line": {
            stroke: "#7E8299",
            strokeWidth: 0.0,
          },
        }}
        disableAxisListener
      />
    </Box>
  );
};

export default Chart;

解决方案 #

1. 让自定义Y轴值生效 #

MUI X LineChart的yAxis配置中，data属性仅用于生成轴的数据范围，不能直接指定自定义刻度。要强制显示自定义Y轴数值，需要做两个修改：

• 用ticks属性替代data，传入自定义刻度数组
• 设置disableAutoMinMax: true，禁用组件自动计算的极值范围

修改后的yAxis配置：

yAxis={[
  {
    scaleType: "linear",
    ticks: yLabels, // 指定自定义刻度数组
    disableAutoMinMax: true, // 禁用自动计算极值
  }
]}

2. 缩小Y轴标签间距 #

固定刻度后，标签间距会自动适配图表高度。如果仍需微调，可通过CSS调整标签的行高或刻度容器的高度：
在sx样式中添加：

// 缩小标签行高，减少垂直间距
"& .MuiChartsAxis-left .MuiChartsAxis-tickLabel": {
  fill: "#7E8299",
  fontFamily: "Inter",
  fontSize: "13px",
  fontStyle: "normal",
  fontWeight: "600",
  lineHeight: "12px", // 调整行高缩小间距
},
// 可选：调整每个刻度的容器高度
"& .MuiChartsAxis-left .MuiChartsAxis-tick": {
  height: 18,
},

完整修改后的核心代码片段 #

// ... 其他代码不变
yAxis={[
  {
    scaleType: "linear",
    ticks: yLabels,
    disableAutoMinMax: true,
  }
]}
sx={{
  // 原有样式...
  "& .MuiChartsAxis-left .MuiChartsAxis-tickLabel": {
    fill: "#7E8299",
    fontFamily: "Inter",
    fontSize: "13px",
    fontStyle: "normal",
    fontWeight: "600",
    lineHeight: "12px", // 缩小行高
  },
  "& .MuiChartsAxis-left .MuiChartsAxis-tick": {
    height: 18, // 调整刻度容器高度
  },
}}
// ... 其他代码不变

内容的提问来源于stack exchange，提问作者Berkant Karakayış