MUI X Charts SparkLine: How to remove the warning coming for xAxis value

Question

I am using MUI X Charts <SparkLineChart> to display 8 quarters of data as shown below,

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

Whenever I hove my cursor on top of the chart showing the tooltip, I am getting this warning in my console.

https://stackblitz.com/run?file=Demo.js

I am not sure what am I doing wrong here. Any help is much appreciated.

Thanks,

Answer 1

The data prop only expects number[], but you passed string[], try only passing numbers to it.