{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-charts"],"cli":null},"imports":["import { Chart } from 'react-charts'","import type { AxisOptions } from 'react-charts'","import type { Series } from 'react-charts'"],"auth":{"required":false,"env_vars":[]},"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    <div style={{ width: '400px', height: '300px' }}>\n      <Chart\n        options={{\n          data,\n          primaryAxis,\n          secondaryAxes,\n        }}\n      />\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}