React Charts

Axes are required components. You must provide a primaryAxis and at least one axis in the secondaryAxes array. Axes use a getValue function to extract values from your datums.

Available Scale Types

Customizing Curves

For element types that support lines (like line or area), you can pass a D3 curve generator function to the curve property in AxisOptions (e.g., curve: d3.curveMonotoneX).

type MyDatum = { date: Date, stars: number }

const primaryAxis = React.useMemo(
  (): AxisOptions<MyDatum> => ({
    getValue: datum => datum.date,
  }),
  []
)

const secondaryAxes = React.useMemo(
  (): AxisOptions<MyDatum>[] => [
    {
      getValue: datum => datum.stars,
    },
  ],
  []
)

React Charts uses a Series structure to organize data. A Series consists of a label and a data array. The elements within the data array are your custom data objects (often referred to as Datums).

Example structure:

type DailyStars = {
  date: Date,
  stars: number,
}

type Series = {
  label: string,
  data: DailyStars[]
}

const data: Series[] = [
  {
    label: 'React Charts',
    data: [
      {
        date: new Date(),
        stars: 202123,
      }
    ]
  }
]

type DailyStars = {
  date: Date,
  stars: number,
}

type Series = {
  label: string,
  data: DailyStars[]
}

const data: Series[] = [
  {
    label: 'React Charts',
    data: [
      {
        date: new Date(),
        stars: 202123,
      }
      // ...
    ]
  },
  {
    label: 'React Query',
    data: [
      {
        date: new Date(),
        stars: 10234230,
      }
      // ...
    ]
  }
]

To render a basic chart in React Charts, you need to provide three main pieces of information in the options prop of the <Chart /> component:

1. An array of Series objects: Each series must have a label (string) and a data property. The data property is an array of Datums (objects representing your data points).
2. primaryAxis: An AxisOptions object that defines how to access the primary value from your data (e.g., the X-axis value).
3. secondaryAxes: An array of AxisOptions objects that define how to access values for the Y-axes (e.g., the values being plotted).

Both axes require a getValue function that takes a datum and returns the specific value to be used on that axis.

function App() {
  const primaryAxis = React.useMemo(
    (): AxisOptions<DailyStars> => ({
      getValue: datum => datum.date,
    }),
    []
  )

  const secondaryAxes = React.useMemo(
    (): AxisOptions<DailyStars>[] => [
      {
        getValue: datum => datum.stars,
      },
    ],
    []
  )

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

To render a basic chart in React, use the Chart component from react-charts. You must provide two primary props:

1. data: An array of series objects. Each object contains a label and a data array of coordinate pairs (e.g., [x, y]).
2. axes: An array of axis configurations. Each axis object defines its type (e.g., 'linear'), position (e.g., 'bottom', 'left'), and whether it is the primary axis.

The Chart component is hyper-responsive and will automatically fill the available space of its parent container. Ensure the parent element has defined dimensions (width and height) via CSS or inline styles.

import React from 'react'
import { Chart } from 'react-charts'

function MyChart() {
  const data = React.useMemo(
    () => [
      {
        label: 'Series 1',
        data: [
          [0, 1],
          [1, 2],
          [2, 4],
          [3, 2],
          [4, 7],
        ],
      },
      {
        label: 'Series 2',
        data: [
          [0, 3],
          [1, 1],
          [2, 5],
          [3, 6],
          [4, 4],
        ],
      },
    ],
    []
  )

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

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