能否为MUI X BarChart添加网格线？含水平/垂直网格线需求

水平网格线（Y轴刻度延伸） #

要添加从Y轴刻度延伸的水平网格线，只需在BarChart的axes配置中，为Y轴开启grid选项：

import { BarChart } from '@mui/x-charts/BarChart';

const MyBarChart = () => {
  const data = [
    { category: 'A', value: 10 },
    { category: 'B', value: 20 },
    { category: 'C', value: 15 },
  ];

  return (
    <BarChart
      width={500}
      height={300}
      series={[{ data: data.map(item => item.value) }]}
      xAxis={[{ data: data.map(item => item.category), scaleType: 'band' }]}
      yAxis={[
        {
          grid: { enabled: true }, // 开启水平网格线
        },
      ]}
    />
  );
};

export default MyBarChart;

垂直网格线（X轴刻度延伸） #

如果需要为折线图等其他图表添加垂直网格线，原理类似，为X轴开启grid选项即可（BarChart同样适用该配置）：

// 以折线图为例
import { LineChart } from '@mui/x-charts/LineChart';

const MyLineChart = () => {
  const data = [10, 20, 15, 25, 30];

  return (
    <LineChart
      width={500}
      height={300}
      series={[{ data }]}
      xAxis={[
        {
          data: [0, 1, 2, 3, 4],
          grid: { enabled: true }, // 开启垂直网格线
        },
      ]}
      yAxis={[{ grid: { enabled: true } }]} // 可同时保留水平网格线
    />
  );
};

export default MyLineChart;

自定义网格线样式（可选） #

如果需要调整网格线的外观，可通过grid对象的属性自定义，比如颜色、宽度、透明度：

yAxis={[
  {
    grid: {
      enabled: true,
      stroke: '#eee',
      strokeWidth: 1,
      opacity: 0.7
    },
  },
]}

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