I have a sparkline chart from MUI for react as follows

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 BasicSparkLine() {
  return (
    <Stack direction="row" sx={{ width: '100%' }}>
      <Box sx={{ flexGrow: 1 }}>
            <SparkLineChart
              data={[10, 20 , 30, 40, 0, -10, 25]}
              xAxis={{
                scaleType: 'point',
                data: [1, 2, 3, 4, 5, 6, 7, 8],
              }}
              height={100}
              width={600}
              showHighlight
            />
      </Box>
    </Stack>
  );
}

If “showHighlight” is set to true, on hover of the sparkline chart, we can see a highlight coming on the chart on each xaxis point.

Q1: Is there a way to have those highlighted points always shown ?

Q2: IS there a possibility to show the highlighted points in different colors based on the xaxis value of that exact point

Any help or suggestion is much appreciated. Thanks in advance

Thanks,