{"id":11712,"library":"react-google-charts","title":"React Google Charts Wrapper","description":"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.","status":"active","version":"5.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/RakanNimer/react-google-charts","tags":["javascript","react","google","charts","typescript"],"install":[{"cmd":"npm install react-google-charts","lang":"bash","label":"npm"},{"cmd":"yarn add react-google-charts","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-google-charts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering React components.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"const Chart = require('react-google-charts').Chart; // Incorrect for modern React apps, especially post v4.0.0\nimport Chart from 'react-google-charts'; // Common mistake, Chart is a named export","symbol":"Chart","correct":"import { Chart } from 'react-google-charts';"},{"note":"Used for more advanced scenarios or when direct access to the Google Charts wrapper instance is needed. It's a named export.","wrong":"import GoogleChartWrapper from 'react-google-charts'; // Not a default export","symbol":"GoogleChartWrapper","correct":"import { GoogleChartWrapper } from 'react-google-charts';"},{"note":"TypeScript users will often import `ChartEvent` or other type definitions for strong typing of event handlers and chart options.","symbol":"ChartEvent","correct":"import type { ChartEvent } from 'react-google-charts';"}],"quickstart":{"code":"import React from 'react';\nimport { Chart } from 'react-google-charts';\n\nfunction MyChartComponent() {\n  const data = [\n    [\"Year\", \"Sales\", \"Expenses\"],\n    [\"2004\", 1000, 400],\n    [\"2005\", 1170, 460],\n    [\"2006\", 660, 1120],\n    [\"2007\", 1030, 540]\n  ];\n\n  const options = {\n    title: \"Company Performance\",\n    curveType: \"function\",\n    legend: { position: \"bottom\" }\n  };\n\n  return (\n    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>\n      <h2>Sales & Expenses Over Time</h2>\n      <Chart\n        chartType=\"LineChart\"\n        data={data}\n        options={options}\n        width=\"100%\"\n        height=\"400px\"\n        legendToggle\n      />\n    </div>\n  );\n}\n\nexport default MyChartComponent;","lang":"typescript","description":"This quickstart demonstrates how to render a basic Line Chart using `react-google-charts`, providing data and options."},"warnings":[{"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`.","message":"Version 4.0.0 dropped support for UMD bundles and older browsers (e.g., Internet Explorer). The package now primarily uses native ES Modules (ESM).","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"Prior 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.","severity":"gotcha","affected_versions":"<5.1.0"},{"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.","message":"In versions prior to 5.0.0, charts might not re-draw correctly when data, columns, or rows props changed, leading to stale visualizations.","severity":"gotcha","affected_versions":"<5.0.0"},{"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`.","message":"Some versions experienced an infinite loading issue while the Google Charts script was being loaded.","severity":"gotcha","affected_versions":"<4.0.6"},{"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.","message":"The `charteditor` package was removed from default `chartPackages` in version 3.0.6, and docs were updated accordingly.","severity":"deprecated","affected_versions":">=3.0.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import Chart from 'react-google-charts';` to `import { Chart } from 'react-google-charts';`.","cause":"Attempting to use `Chart` as a default import when it is a named export, especially in projects configured for ESM.","error":"TypeError: (0 , react_google_charts__WEBPACK_IMPORTED_MODULE_2__.Chart) is not a function"},{"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.","cause":"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.","error":"Error: google.charts.load() called multiple times with different settings."},{"fix":"Always provide a valid `chartType` prop, e.g., `<Chart chartType=\"BarChart\" ... />`.","cause":"The `Chart` component was rendered without specifying the `chartType` prop, which is mandatory for Google Charts to know which type of chart to render.","error":"Error: [react-google-charts]: A 'chartType' prop is required."},{"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]]}`.","cause":"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).","error":"Warning: Failed prop type: Invalid prop `data` supplied to `Chart`. Expected an array of arrays."}],"ecosystem":"npm"}