Installing TanStack React Charts and Setting Up a Basic Line Chart

Demonstrate how to install the TanStack React Charts library and set up a simple line chart to display sales data over a week.

// Installing TanStack React Charts using npm
npm install @tanstack/react-charts

This command installs the TanStack React Charts library using npm. Ensure this is run in the terminal at the root of your React project.

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

function MyLineChart() {
  // Data for the chart
  const data = useMemo(
    () => [
      {
        label: 'Sales',
        data: [[0, 1], [1, 2], [2, 3], [3, 5], [4, 8], [5, 13], [6, 21]]
      }
    ],
    []
  );

  // Axes for the chart
  const axes = useMemo(
    () => [
      { primary: true, type: 'linear', position: 'bottom' },
      { type: 'linear', position: 'left' }
    ],
    []
  );

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

export default MyLineChart;

This component defines a basic line chart using TanStack React Charts. The data and axes are set up using the useMemo hook for performance optimization. The chart displays a hypothetical sales data over a week.