Enhancing User Experience with Tooltips and Zoom Features

import { Chart } from 'react-charts';
import ReactTooltip from 'react-tooltip';

function MyChart() {
  const data = React.useMemo(
    () => [
      {
        label: 'Series 1',
        data: [{ primary: 'Jan', secondary: 10 }, { primary: 'Feb', secondary: 20 }]
      },
    ],
    []
  );

  const series = React.useMemo(
    () => ({
      type: 'bar'
    }),
    []
  );

  const axes = React.useMemo(
    () => [
      { primary: true, type: 'ordinal', position: 'bottom' },
      { type: 'linear', position: 'left' }
    ],
    []
  );

  const getSeriesStyle = React.useCallback(
    () => ({
      transition: 'all .5s ease'
    }),
    []
  );

  const getDatumStyle = React.useCallback(
    (datum) => ({
      r: datum.focused ? 7 : datum.selected ? 5 : 3,
      fill: datum.focused ? 'red' : 'blue'
    }),
    []
  );

  const tooltip = React.useMemo(
    () => ({
      render: ({ datum }) => datum ? `${datum.seriesLabel}: ${datum.primary} - ${datum.secondary}` : '',
    }),
    []
  );

  return (
    <div data-tip='' data-for='chartTooltip'>
      <ReactTooltip id='chartTooltip' place='top' effect='solid' />
      <Chart data={data} series={series} axes={axes} getSeriesStyle={getSeriesStyle} getDatumStyle={getDatumStyle} tooltip={tooltip} />
    </div>
  );
}