如何为MUI SparkLineChart的提示框数据添加$符号

问题分析 #

SparkLineChart要求data属性必须为数值类型（用于图表坐标计算与渲染逻辑），直接将数值转为字符串数组会破坏组件的渲染规则，导致报错。正确思路是保留原始数值数据，通过自定义Tooltip内容实现格式转换。

解决方案 #

使用组件的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 CustomAxis() {
  return (
    <Stack direction="row" sx={{ width: '100%' }}>
      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart
          data={[1, 4, 2, 5, 7, 2, 4, 6]}
          xAxis={{
            scaleType: 'time',
            data: [
              new Date(2022, 5, 1),
              new Date(2022, 5, 2),
              new Date(2022, 5, 5),
              new Date(2022, 5, 6),
              new Date(2022, 5, 7),
              new Date(2022, 5, 8),
              new Date(2022, 5, 11),
              new Date(2022, 5, 12),
            ],
            valueFormatter: (value) => value.toISOString().slice(0, 10),
          }}
          height={100}
          showHighlight
          // 自定义Tooltip内容
          tooltip={{
            content: ({ value }) => `$ ${value}`,
          }}
        />
      </Box>
    </Stack>
  );
}

扩展：同时显示日期与格式化数值 #

如果需要在Tooltip中同时展示日期和格式化后的数值，可以利用参数中的xValue（对应x轴的日期数据）：

tooltip={{
  content: ({ value, xValue }) => {
    const formattedDate = xValue.toISOString().slice(0, 10);
    return `${formattedDate}: $ ${value}`;
  },
}}

原理说明 #

• tooltip.content接收一个回调函数，参数包含当前高亮数据点的value（y轴数值）、xValue（x轴数据）等核心信息。
• 函数返回的字符串直接作为Tooltip的显示内容，既保留了原始数值用于图表渲染，又实现了自定义格式展示，完全兼容组件的运行规则。

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