如何在MUI X SparkLineChart的Tooltip数据后添加%符号

不需要将data数组转为字符串（这会导致图表渲染错误，因为组件要求数据为数值类型），直接通过自定义Tooltip的格式化函数即可实现需求：

• 保留原数值数组data={[1, 4, 2, 5, 7, 2, 4, 6]}
• 给SparkLineChart添加tooltipFormatter属性，将每个数据点的数值拼接上百分号

修改后的完整代码：

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}
          showTooltip
          showHighlight
          // 自定义Tooltip格式化函数
          tooltipFormatter={(value) => `${value}%`}
        />
      </Box>
    </Stack>
  );
}

关键说明： #

tooltipFormatter接收当前数据点的数值作为参数，返回你想要显示的字符串内容。这里直接将数值与%拼接，就能让Tooltip显示为1%、4%等格式，同时保持原数据的数值类型，不会触发图表渲染错误。

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