{"id":18056,"library":"react-charts","title":"React Charts","description":"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.","status":"active","version":"2.0.0-beta.7","language":"javascript","source_language":"en","source_url":"https://github.com/react-tools/react-charts","tags":["javascript"],"install":[{"cmd":"npm install react-charts","lang":"bash","label":"npm"},{"cmd":"yarn add react-charts","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-charts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components.","package":"react","optional":false}],"imports":[{"note":"Since v3, the library is primarily designed for ESM consumption. CommonJS `require` is generally not supported or recommended.","wrong":"const Chart = require('react-charts')","symbol":"Chart","correct":"import { Chart } from 'react-charts'"},{"note":"Import types explicitly for TypeScript usage to leverage full type safety for chart configuration.","symbol":"AxisOptions","correct":"import type { AxisOptions } from 'react-charts'"},{"note":"Import `Series` type for defining chart data structures, which helps in type-checking your data inputs.","symbol":"Series","correct":"import type { Series } from 'react-charts'"}],"quickstart":{"code":"import React from 'react';\nimport { Chart } from 'react-charts';\n\nfunction MyChart() {\n const data = React.useMemo(\n () => [\n {\n label: 'Series 1',\n data: [\n { primary: 'Apr', secondary: 10 },\n { primary: 'May', secondary: 15 },\n { primary: 'Jun', secondary: 12 },\n { primary: 'Jul', secondary: 18 },\n ],\n },\n {\n label: 'Series 2',\n data: [\n { primary: 'Apr', secondary: 5 },\n { primary: 'May', secondary: 7 },\n { primary: 'Jun', secondary: 9 },\n { primary: 'Jul', secondary: 11 },\n ],\n },\n ],\n []\n );\n\n const primaryAxis = React.useMemo(\n () => ({ getValue: datum => datum.primary }),\n []\n );\n\n const secondaryAxes = React.useMemo(\n () => [{\n getValue: datum => datum.secondary,\n elementType: 'line'\n }],\n []\n );\n\n return (\n
\n \n
\n );\n}\n\nexport default MyChart;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Major breaking changes exist between v2 and v3. The API surface for `Chart` options, data structure, and axis configuration has been significantly refactored.","severity":"breaking","affected_versions":">=3.0.0-beta.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0-beta.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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' }]`.","message":"Incorrect `elementType` for secondary axes can lead to unexpected rendering or errors, especially when mixing chart types or not providing a default.","severity":"gotcha","affected_versions":">=3.0.0-beta.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Wrap the `` component in a `div` with defined `width` and `height` styles, e.g., `
`.","cause":"The parent container of the `Chart` component has no explicit dimensions, leading to the chart rendering with zero width/height.","error":"TypeError: Cannot read properties of undefined (reading 'width') or Chart does not render."},{"fix":"Ensure both `primaryAxis` and all `secondaryAxes` objects include a `getValue` function, e.g., `primaryAxis: { getValue: datum => datum.primary }`.","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.","error":"Error: `getValue` is required for all axes."},{"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.","cause":"The `react-charts` package is not installed, or there's a problem with module resolution in your build setup (less common).","error":"Module not found: Can't resolve 'react-charts' in '...' or Cannot find module 'react-charts'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}