Customizing Chart Appearance in TanStack React Charts

Showcase how to customize the appearance of a bar chart, including changing bar colors and adding labels, to represent monthly revenue data.

import { Chart } from 'react-charts';

function MyBarChart() {
    const data = React.useMemo(
        () => [
            {
                label: 'Monthly Revenue',
                data: [[0, 10], [1, 20], [2, 30]] // Example data
            }
        ],
        []
    );

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

    const getSeriesStyle = React.useCallback(
        () => ({
            // Customize bar color
            fill: 'rgba(255, 99, 132, 0.5)'
        }),
        []
    );

    return (
        <div style={{ width: '400px', height: '300px' }}>
            <Chart data={data} axes={axes} getSeriesStyle={getSeriesStyle} />
        </div>
    );
}

This code sets up a basic bar chart using react-charts. It includes a useMemo hook to define the chart data and axes, and uses a useCallback hook to customize the bar color through the getSeriesStyle function. The chart represents monthly revenue data with customized bar colors.