[charts] Customising sparkline highlight point

[Manikandasubramani]

Steps to reproduce

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

Current behavior

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.

Expected behavior

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

Context

We are trying to have the highlighted datapoint always in the sparkline chart and as well to give a color different of each data point based on the data point value.. for ex., the highlighted data point in green is the y-axis value is >0 or in red if the value is <=0

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: DefaultChartsAxisTooltipContent

[alexfauquette]

I'm not sure to fully get your expected behavior

By reusing some hooks provided to create custom components I created an <Indicator /> component that add a circle to your chart

https://codesandbox.io/s/awesome-dust-vpcqkk?file=/src/Demo.tsx

Does it solve your issue?

[Manikandasubramani]

Yes, this is what i need..

Thank you very much

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Manikandasubramani: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Manikandasubramani]

Hey @alexfauquette , I am getting this error "export 'unstable_useLineSeries' (imported as 'unstable_useLineSeries') was not found in '@mui/x-charts/hooks' (possible exports: getValueToPositionMapper, useDrawingArea, useXScale, useYScale)"., is this because of a version mismatch ? My version is "@mui/x-charts: ^6.19.5"

[alexfauquette]

Two solutions:

• You update to the latest v7. The charts have nearly no breaking changes between v6 and v7: https://mui.com/x/migration/migration-charts-v6/
• You don't use this hook, and then you have to directly provide the y-value

[Manikandasubramani]

#2 worked out great.. Thank you very much.. :)

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Manikandasubramani: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.