Customizing Tooltips in TanStack React Charts

Customize tooltips in TanStack React Charts to display additional data points or custom formatting when hovering over different parts of a chart.

import { Chart } from 'react-charts';

function MyChart({ data }) {
  const series = React.useMemo(
    () => ({
      showPoints: true
    }),
    []
  );
  
  const axes = React.useMemo(
    () => [
      { primary: true, type: 'linear', position: 'bottom' },
      { type: 'linear', position: 'left' }
    ],
    []
  );
  
  const tooltip = React.useMemo(
    () => ({
      render: ({ datum }) => (
        `<div style={{ padding: '10px' }}>${datum.seriesLabel}: ${datum.primary} - ${datum.secondary.toFixed(2)}</div>`
      )
    }),
    []
  );
  
  return (
    <Chart data={data} series={series} axes={axes} tooltip={tooltip} />
  );
}

This code snippet demonstrates how to customize tooltips in TanStack React Charts. When a user hovers over a part of the chart, the tooltip will display custom formatting including the series label, primary value, and the secondary value formatted to two decimal places. The `tooltip.render` method is used to define custom HTML content for the tooltip, showcasing flexibility in presentation.