Registry / data / react-charts

react-charts

library2.0.0-beta.7jsnpmunverified

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.

data

npm install react-charts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-CHARTS

react-charts

datajavascriptv2.0.0-beta.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Chart

✓ import { Chart } from 'react-charts'

✗ const Chart = require('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.

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;

Debug

Known issues

breakingMajor 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.

affects: >=3.0.0-beta.0

gotchaReact 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.

affects: >=3.0.0-beta.0

gotchaCharts 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.

affects: >=2.0.0

gotchaIncorrect `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' }]`.

affects: >=3.0.0-beta.0

Errors

Common errors & fixes

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

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: `getValue` is required for all axes.

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 }`.

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

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.

Upgrade

Version history

2.0.0-beta.7latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/react-tools/react-charts ↗

packagehttps://www.npmjs.com/package/react-charts ↗

homepagehttps://react-charts.tanstack.com ↗