Setting Up TanStack React Charts in a Dashboard

Demonstrate how to install and set up TanStack React Charts in a React application, including the creation of a basic chart component.

npm install @tanstack/react-charts

This command installs the TanStack React Charts library into your React application. Run this in your project directory.

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

Import the Chart component from the TanStack React Charts library along with React to use in your component file.

function MyChart() {
  const data = React.useMemo(() => [
    {
      label: 'Series 1',
      data: [
        { x: 1, y: 10 },
        { x: 2, y: 20 },
        { x: 3, y: 30 }
      ]
    }
  ], []);

  const primaryAxis = React.useMemo(
    () => ({
      getValue: datum => datum.x
    }),
    []
  );

  const secondaryAxes = React.useMemo(
    () => [{
      getValue: datum => datum.y
    }],
    []
  );

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

Create a MyChart functional component. Use React's useMemo hook to memoize your data and axis configurations for performance optimization. Finally, render the Chart component from TanStack React Charts with the specified options.