How to select specific marker in MUI React Charts

Question

Can i know How to select specific marker in MUI React Charts

Answer 1

You can implement marker selection through click events and controlled props. Here's how to do it:

Using onItemClick and Controlled Selection:

import { ScatterChart } from '@mui/x-charts';

import { useState } from 'react';

function ChartWithSelectableMarkers() {

  const [selectedMarker, setSelectedMarker] = useState(null);

  const data = [

    { id: 'point1', x: 10, y: 20 },

    { id: 'point2', x: 15, y: 25 },

    { id: 'point3', x: 20, y: 30 },

  ];

  return (

    <ScatterChart

      series={[

        {

          data: data,

          label: 'Series 1',

          color: (params) => 

            params.id === selectedMarker ? 'red' : 'blue',

        },

      ]}

      onItemClick={(event, params) => {

        setSelectedMarker(params?.id);

      }}

      width={500}

      height={300}

    />

  );

}