Creating a Basic Pie Chart

Demonstrate how to construct a simple pie chart using TanStack React Charts library, including setting up the dataset and configuring the pie chart options for a basic visual representation.

import { Chart } from 'react-charts'

Imports the Chart component from the react-charts library.

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

Defines a component function and uses React's useMemo hook to memoize the dataset, which includes labels and data points for our pie chart.

const series = React.useMemo(
    () => ({
      type: 'pie'
    }),
    []
  );

Uses React's useMemo hook to define the series type as 'pie' for rendering a pie chart.

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

Memoizes the axes configuration. Although not directly used in pie charts, it's part of the chart configuration.

return (
    <Chart data={data} series={series} axes={axes} tooltip />
  );
}

Renders the Chart component with our data, series, and axes configurations along with enabling the tooltip.

export default MyChart;

Exports the MyChart component for use in other parts of the application.