Blog>
Snippets

Implementing Interactive Tooltips

Provide an example of customizing tooltips in TanStack React Charts for interactivity, including displaying detailed data when hovering over chart elements.
import { Chart } from 'react-charts'
First, import the Chart component from the react-charts package.
function MyChart({ data }) {
  const series = React.useMemo(
    () => ({
      showPoints: true
    }),
    []
  );

  const axes = React.useMemo(
    () => [
      { primary: true, type: 'linear', position: 'bottom' },
      { type: 'linear', position: 'left' }
    ],
    []
  );
Define the basic chart setup with series and axes configurations.
const getTooltipData = originalDatum => `Custom Info: ${originalDatum}`;
Define a function for generating custom tooltip content. You can customize this function to display the data you need.
const tooltip = React.useMemo(
    () => ({
      render: ({ datum }) => (
        <div style={{ padding: '10px', backgroundColor: '#fff' }}>
          {getTooltipData(datum.originalDatum)}
        </div>
      )
    }),
    []
  );
Customize the tooltip through the chart's tooltip prop to display detailed information on hover. The `render` function will be called with each hovering event.
return (
    <Chart data={data} series={series} axes={axes} tooltip={tooltip} />
  );
}
Render the Chart component with the defined props, including the custom tooltip.
export default MyChart;
Export your chart component so it can be used in other parts of your application.