MUI Sparkline: How to add $ symbol to the tooltip data in MUI Sparklinechart

Question

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>
  );
}

And for this, chart gets generated as

I want to add a '$' symbol in the tooltip as '$ 7' instead of just '7'. 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,

Answer 1

There is a similar example here:

...
const yearFormater = (date: Date) => date.getFullYear().toString();
const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
}).format;

export default function Formatting() {
  return (
    <LineChart
      {...lineChartsParams}
      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
      series={lineChartsParams.series.map((s) => ({
        ...s,
        valueFormatter: currencyFormatter,
      }))}
    />
  );
}

In your case it will be:

    <SparkLineChart
      data={[1, 4, 2, 5, 7, 2, 4, 6]}
      valueFormatter={currencyFormatter}
      xAxis={{ ...