Setting up TanStack React Charts in a React Application

Demonstrate the initial setup process for integrating TanStack React Charts into a new React application, including installation and rendering a basic chart.

npm install @tanstack/react-charts

First, install the TanStack React Charts library using npm or yarn into your project.

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

Import the Chart component from the react-charts package and React to use in your component file.

function MyChart() {
  const data = React.useMemo(
    () => [
      {
        label: 'Series 1',
        data: [{ primary: 'A', secondary: 10 }, { primary: 'B', secondary: 20 }]
      }
    ],
    []
  );

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

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

Define a functional component `MyChart` that utilizes the `Chart` component from TanStack React Charts. The `data` and `axes` are defined using React's `useMemo` hook for performant re-renders. This example uses simple data for demonstration.

export default MyChart;

Export the `MyChart` component so it can be used in other parts of your application.