{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-google-charts"],"cli":null},"imports":["import { Chart } from 'react-google-charts';","import { GoogleChartWrapper } from 'react-google-charts';","import type { ChartEvent } from 'react-google-charts';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}