Registry / web-framework / react-google-charts

react-google-charts

library5.2.1jsnpmunverified

react-google-charts is a fully typed React component library that provides a lightweight wrapper around the official Google Charts library. It simplifies the integration of over 25 different Google Chart types, supporting animations and extensive customization options. The package is currently at version 5.2.1 and shows an active release cadence with frequent updates, including new features, bug fixes, and typings enhancements, as evidenced by recent 5.x releases. Its primary differentiator is providing a modern React component API with TypeScript support, abstracting away the direct interaction with the Google Charts loader script and API, making it easier for React developers to quickly add data visualizations to their applications without deep knowledge of the underlying Google Charts library.

web-framework

npm install react-google-charts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-GOOGLE-CHART

react-google-charts

web-frameworkjavascriptv5.2.1

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-google-charts';

✗ const Chart = require('react-google-charts').Chart; // Incorrect for modern React apps, especially post v4.0.0 import Chart from 'react-google-charts'; // Common mistake, Chart is a named export

The primary component for rendering charts is a named export. Since v4.0.0, the package primarily supports ES Modules, dropping UMD bundles and older browser support.

GoogleChartWrapper

✓ import { GoogleChartWrapper } from 'react-google-charts';

✗ import GoogleChartWrapper from 'react-google-charts'; // Not a default export

Used for more advanced scenarios or when direct access to the Google Charts wrapper instance is needed. It's a named export.

ChartEvent

✓ import type { ChartEvent } from 'react-google-charts';

TypeScript users will often import `ChartEvent` or other type definitions for strong typing of event handlers and chart options.

This quickstart demonstrates how to render a basic Line Chart using `react-google-charts`, providing data and options.

import React from 'react'; import { Chart } from 'react-google-charts'; function MyChartComponent() { const data = [ ["Year", "Sales", "Expenses"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540] ]; const options = { title: "Company Performance", curveType: "function", legend: { position: "bottom" } }; return ( <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}> <h2>Sales & Expenses Over Time</h2> <Chart chartType="LineChart" data={data} options={options} width="100%" height="400px" legendToggle /> </div> ); } export default MyChartComponent;

Debug

Known issues

breakingVersion 4.0.0 dropped support for UMD bundles and older browsers (e.g., Internet Explorer). The package now primarily uses native ES Modules (ESM).

fix

Ensure your project is configured to handle ES Modules and your target browser environment is modern. Update your import statements from CommonJS `require()` to ESM `import`.

affects: >=4.0.0

gotchaPrior to v5.1.0, event listeners were not always correctly added and removed, potentially leading to memory leaks or incorrect behavior when props changed or components unmounted.

fix

Upgrade to v5.1.0 or newer to benefit from the fix that uses `useEffect` for managing event listeners. This ensures proper cleanup and re-initialization.

affects: <5.1.0

gotchaIn versions prior to 5.0.0, charts might not re-draw correctly when data, columns, or rows props changed, leading to stale visualizations.

fix

Update to version 5.0.0 or later, which includes fixes to ensure charts re-draw reliably on relevant prop changes, including data, columns, and rows.

affects: <5.0.0

gotchaSome versions experienced an infinite loading issue while the Google Charts script was being loaded.

fix

Upgrade to version 4.0.6 or newer, which includes mitigations for the infinite loading issue. If the problem persists, ensure no other scripts are interfering with Google's `loader.js`.

affects: <4.0.6

deprecatedThe `charteditor` package was removed from default `chartPackages` in version 3.0.6, and docs were updated accordingly.

fix

If you relied on `charteditor`, you might need to explicitly load it or review alternative solutions if your use case requires it. Check the updated documentation for guidance.

affects: >=3.0.6

Errors

Common errors & fixes

TypeError: (0 , react_google_charts__WEBPACK_IMPORTED_MODULE_2__.Chart) is not a function

Attempting to use `Chart` as a default import when it is a named export, especially in projects configured for ESM.

fix

Change your import statement from `import Chart from 'react-google-charts';` to `import { Chart } from 'react-google-charts';`.

Error: google.charts.load() called multiple times with different settings.

Multiple instances of `react-google-charts` or other libraries are trying to load the Google Charts loader with conflicting settings. This often happens in larger applications or micro-frontends.

fix

Ensure that `google.charts.load` is called only once with a consistent configuration across your application. You might need to coordinate loading or use a single top-level `Chart` component to manage the loader.

Error: [react-google-charts]: A 'chartType' prop is required.

The `Chart` component was rendered without specifying the `chartType` prop, which is mandatory for Google Charts to know which type of chart to render.

fix

Always provide a valid `chartType` prop, e.g., `<Chart chartType="BarChart" ... />`.

Warning: Failed prop type: Invalid prop `data` supplied to `Chart`. Expected an array of arrays.

The `data` prop provided to the `Chart` component is not in the expected Google Charts DataTable format (an array where the first element is headers and subsequent elements are rows).

fix

Ensure your `data` prop is an array of arrays, with the first inner array typically being the column headers and subsequent arrays being the data rows, e.g., `data={[['x', 'y'], [1, 2], [3, 4]]}`.

Upgrade

Version history

5.2.1latest on npm

Audit

Dependencies

reactrequiredRequired for rendering React components.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/RakanNimer/react-google-charts ↗

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

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