React Charts

2.0.0-beta.7 verified Sat Apr 25 auth: no javascript

React Charts is a declarative charting library for React, leveraging D3 and React-Spring for highly customizable and performant data visualizations. It's designed to be lightweight, fast, and fully responsive, offering a wide range of chart types including line, bar, area, and bubble charts. The library is currently in an active beta phase for its v3 major version, with frequent updates addressing bugs and adding new features, as evidenced by the recent `3.0.0-beta.*` releases. It differentiates itself by providing a robust API for custom tooltip rendering, axis configuration, and interactive elements, aiming for a balance between ease of use and advanced customization. The current stable release appears to be `2.0.0-beta.7`, but active development is focused on the `3.x` branch.

Common errors

error TypeError: Cannot read properties of undefined (reading 'width') or Chart does not render. ↓

cause The parent container of the `Chart` component has no explicit dimensions, leading to the chart rendering with zero width/height.

fix

Wrap the <Chart /> component in a div with defined width and height styles, e.g., <div style={{ width: '100%', height: '300px' }}><Chart ... /></div>.

error Error: `getValue` is required for all axes. ↓

cause An axis configuration object is missing the `getValue` function, which tells the chart how to extract the relevant data point for that axis from your series data.

fix

Ensure both primaryAxis and all secondaryAxes objects include a getValue function, e.g., primaryAxis: { getValue: datum => datum.primary }.

error Module not found: Can't resolve 'react-charts' in '...' or Cannot find module 'react-charts'. ↓

cause The `react-charts` package is not installed, or there's a problem with module resolution in your build setup (less common).

fix

Run npm install react-charts or yarn add react-charts. If using TypeScript, ensure react-charts is listed in your tsconfig.json's types or typeRoots if custom type declarations are used.

Warnings

breaking Major breaking changes exist between v2 and v3. The API surface for `Chart` options, data structure, and axis configuration has been significantly refactored. ↓

fix Refer to the official v3 documentation or migration guides for updated API usage. Many props from v2 are now consolidated into a single `options` prop on the `Chart` component.

gotcha React Charts v3 is still in beta. While actively developed, breaking changes can occur between beta versions, and the API might not be entirely stable. ↓

fix Pin the exact beta version in your `package.json` (`"react-charts": "3.0.0-beta.x"`) to prevent unexpected updates. Regularly check release notes for changes.

gotcha Charts require explicit width and height. If the parent container does not have defined dimensions, the chart may not render or will render with a size of 0x0. ↓

fix Ensure the `Chart` component is rendered within a container that has explicit `width` and `height` CSS properties, or use a flexible container like `flex: 1` in a flexbox layout.

gotcha Incorrect `elementType` for secondary axes can lead to unexpected rendering or errors, especially when mixing chart types or not providing a default. ↓

fix Always specify `elementType: 'line'`, `elementType: 'bar'`, etc., on each secondary axis definition to explicitly control how the data is rendered. For example: `secondaryAxes: [{ getValue: d => d.secondary, elementType: 'line' }]`.

Install

npm install react-charts

yarn add react-charts

pnpm add react-charts

Imports

Chart
wrong
```
const Chart = require('react-charts')
```
correct
```
import { Chart } from 'react-charts'
```
Since v3, the library is primarily designed for ESM consumption. CommonJS `require` is generally not supported or recommended.
AxisOptions
```
import type { AxisOptions } from 'react-charts'
```
Import types explicitly for TypeScript usage to leverage full type safety for chart configuration.
Series
```
import type { Series } from 'react-charts'
```
Import `Series` type for defining chart data structures, which helps in type-checking your data inputs.

Quickstart

This quickstart renders a basic line chart with two series, demonstrating data structure, primary and secondary axis configuration, and wrapping the chart in a sized container.

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

function MyChart() {
  const data = React.useMemo(
    () => [
      {
        label: 'Series 1',
        data: [
          { primary: 'Apr', secondary: 10 },
          { primary: 'May', secondary: 15 },
          { primary: 'Jun', secondary: 12 },
          { primary: 'Jul', secondary: 18 },
        ],
      },
      {
        label: 'Series 2',
        data: [
          { primary: 'Apr', secondary: 5 },
          { primary: 'May', secondary: 7 },
          { primary: 'Jun', secondary: 9 },
          { primary: 'Jul', secondary: 11 },
        ],
      },
    ],
    []
  );

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

  const secondaryAxes = React.useMemo(
    () => [{
      getValue: datum => datum.secondary,
      elementType: 'line'
    }],
    []
  );

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

export default MyChart;