Customizing Theme Colors in TanStack React Charts

Illustrates how to change the default theme colors of a chart to match a brand's color scheme using custom themes.

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

First, import the Chart component from the TanStack React Charts library.

const customTheme = {
  colors: ['#123456', '#654321', '#fdecba', '#abcdef'],
};

Define a custom theme object with a colors array to match your brand's color scheme.

function MyCustomChart({ data }) {
  return (
    <Chart
      options={{
        theme: customTheme,
        data,
        axes: [
          { primary: true, position: 'bottom', type: 'linear' },
          { position: 'left', type: 'linear', stacked: false },
        ],
        series: {
          type: 'bar',
        },
      }}
    />
  );
}

Create a chart component function applying the custom theme as part of the Chart options.