{"library":"recharts","title":"Recharts","description":"Recharts is a declarative charting library for React applications, built with React and D3, providing native SVG support and minimal external dependencies. Currently stable at version 3.8.1, the library receives regular minor updates, introducing new features, hooks, and crucial bug fixes, as evidenced by its consistent 3.x release cadence. Its core principles emphasize simple deployment through React components, a lightweight footprint leveraging native SVG, and a declarative API where each chart element functions as an independent React component. Key differentiators include robust TypeScript support (significantly enhanced with generics in v3.8.0 for data validation), a highly compositional approach for constructing complex visualizations, and ongoing performance optimizations. It relies on specific peer dependencies for React, ReactDOM, and React-is to ensure proper functioning within the React ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install recharts"],"cli":null},"imports":["import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';","import { BarChart, Bar } from 'recharts';","import { ResponsiveContainer } from 'recharts';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { LineChart, XAxis, YAxis, Tooltip, CartesianGrid, Line, Legend, ResponsiveContainer } from 'recharts';\n\ninterface ChartData {\n  name: string;\n  uv: number;\n  pv: number;\n  amt: number;\n}\n\nconst data: ChartData[] = [\n  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },\n  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },\n  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },\n  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },\n  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },\n  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },\n  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }\n];\n\nfunction MyLineChart() {\n  return (\n    <div style={{ width: '100%', height: 300 }}>\n      <h3>Line Chart with 'responsive' prop (v3.3.0+):</h3>\n      <LineChart<ChartData> width={500} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} responsive>\n        <CartesianGrid strokeDasharray=\"3 3\" />\n        <XAxis dataKey=\"name\" />\n        <YAxis />\n        <Tooltip />\n        <Legend />\n        <Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" activeDot={{ r: 8 }} />\n        <Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" />\n      </LineChart>\n\n      <h3>Line Chart with ResponsiveContainer:</h3>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <LineChart<ChartData> data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey=\"name\" />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          <Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" activeDot={{ r: 8 }} />\n          <Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\nexport default MyLineChart;","lang":"typescript","description":"Demonstrates a basic line chart with multiple lines, axes, tooltips, and legends, showing both the newer `responsive` prop (v3.3.0+) and the `ResponsiveContainer` component for adaptable sizing, alongside TypeScript integration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}