Setting Up TanStack React Charts

Demonstrates the installation and setup process for TanStack React Charts in a new React project, including the creation of a basic line chart.

npm install @tanstack/react-charts

First, install the TanStack React Charts package using npm or yarn.

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

Import the Chart component from the TanStack React Charts package.

const data = [
  {
    label: 'Series 1',
    data: [{ primary: 'A', secondary: 10 }, { primary: 'B', secondary: 20 }]
  }
];

Define some mock data for the chart. This is usually dynamic data from props or state.

const MyLineChart = () => {
  const primaryAxis = React.useMemo(() => ({
    getValue: datum => datum.primary
  }), []);
  
  const secondaryAxes = React.useMemo(() => [{
    getValue: datum => datum.secondary
  }], []);
  
  return (
    <Chart
      options={{
        data,
        primaryAxis,
        secondaryAxes
      }}
    />
  );
};

Create a functional component that uses Chart to render a line chart. It includes the configuration for primary and secondary axes.

export default MyLineChart;

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