Creating a Custom Tooltip for Financial Data Points

Provide an example of creating a custom tooltip for a financial chart using TanStack React Charts, including showing additional data details on hover.

import { Chart } from '@tanstack/react-charts';
import React from 'react';

Imports the necessary components from TanStack React Charts and React.

const MyFinancialChart = () => {
    const data = React.useMemo(() => [
        {
            label: 'Dataset 1',
            data: [{ primary: 'Jan', secondary: 1000 }, { primary: 'Feb', secondary: 1200 }]
        }
    ], []);

Defines a functional component and sets up the chart data.

const tooltipRender = React.useMemo(() => (
        { datum } // This destructuring grabs the individual data point's datum
    ) => (
        <div>
            <h3>{datum.primary}: ${datum.secondary}</h3>
            <p>Additional Data: XYZ</p>
        </div>
    ), []);

Custom tooltip render function that displays additional data when hovering over a data point.

const chartOptions = React.useMemo(() => ({
        initialWidth: 600,
        initialHeight: 300,
        tooltip: {
            render: tooltipRender
        }
    }), [tooltipRender]);

Configures chart options to use the custom tooltip render function.

return (
        <Chart options={chartOptions} data={data} />
    );
};

Renders the chart with the configured options and data.

export default MyFinancialChart;

Exports the custom financial chart component.