Home MUI Sparkline: How to add % symbol at the end in the tooltip data in MUI Sparklinechart

Questions

MUI Sparkline: How to add % symbol at the end in the tooltip data in MUI Sparklinechart

February 6, 2024

I have the below SparklineChart from MUI

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
        />
      </Box>
    </Stack>
  );
}

I want to add a ‘%’ symbol in the tooltip as ‘1%, 4%, 2%, 5%, 7%, 2%, 4%, 6%’ instead of just ‘1, 4, 2, 5, 7, 2, 4, 6’ for each data point. I tried converting the data which is in integer array to string int array, but the chart render throws an error saying the data should be in integers.

Any help is much appreciated

Thanks,

>Solution :

Use valueFormatter in SparkLineChart. for example:

    <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),
      }}
      valueFormatter={(e)=>{return `${e}%`}}
      height={100}
      showTooltip
      showHighlight
    />