如何消除MUI X Charts SparkLineChart的xAxis值警告？

使用MUI X Charts的<SparkLineChart>展示8个季度数据，开启showTooltip后，鼠标悬停时控制台出现警告。相关代码如下：

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function BasicSparkLineCustomization() {

  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      <Stack direction="row" sx={{ width: '100%' }}>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            data={[10, 20, 15, 45, 44, 12, 55, 20]}
            xAxis={{
              scaleType: 'band',
              data: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'],
            }}
            height={50}
            width={150}
            showHighlight
            showTooltip
          />
        </Box>
      </Stack>
    </Stack>
  );
}

问题原因 #

警告的核心原因是SparkLineChart的内置Tooltip逻辑是为连续线性刻度（linear）设计的，当配置xAxis.scaleType: 'band'（离散分类刻度）时，组件在计算鼠标悬停坐标与数据点的匹配关系时，会因为离散刻度的特性出现数值偏差，从而触发控制台警告。

解决方案 #

方案1：改用线性刻度，自定义Tooltip显示季度名称 #

将x轴改为线性刻度，通过索引映射季度名称，同时利用tooltipFormatter自定义Tooltip内容，避免刻度兼容问题：

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function BasicSparkLineCustomization() {
  const quarters = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'];
  const data = [10, 20, 15, 45, 44, 12, 55, 20];

  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      <Stack direction="row" sx={{ width: '100%' }}>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            data={data}
            xAxis={{
              scaleType: 'linear',
              data: Array.from({ length: 8 }, (_, i) => i), // 用索引作为线性刻度数据
            }}
            height={50}
            width={150}
            showHighlight
            showTooltip
            tooltipFormatter={(value, index) => `${quarters[index]}: ${value}`} // 自定义Tooltip显示季度
          />
        </Box>
      </Stack>
    </Stack>
  );
}

方案2：保留Band刻度，自定义Tooltip组件 #

如果需要保留band刻度，可禁用组件内置Tooltip，通过onHighlightChange事件监听高亮索引，搭配MUI原生<Tooltip>组件实现自定义交互：

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
import Tooltip from '@mui/material/Tooltip';

export default function BasicSparkLineCustomization() {
  const quarters = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'];
  const data = [10, 20, 15, 45, 44, 12, 55, 20];
  const [highlightedIndex, setHighlightedIndex] = React.useState(null);

  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      <Stack direction="row" sx={{ width: '100%' }}>
        <Box sx={{ flexGrow: 1 }}>
          <Tooltip
            open={highlightedIndex !== null}
            title={highlightedIndex !== null ? `${quarters[highlightedIndex]}: ${data[highlightedIndex]}` : ''}
            placement="top"
          >
            <SparkLineChart
              data={data}
              xAxis={{
                scaleType: 'band',
                data: quarters,
              }}
              height={50}
              width={150}
              showHighlight
              onHighlightChange={({ index }) => setHighlightedIndex(index)} // 监听高亮索引
              // 移除showTooltip，禁用内置Tooltip
            />
          </Tooltip>
        </Box>
      </Stack>
    </Stack>
  );
}

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