--- name: recharts description: Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and accessibility. --- # Recharts React charting library built on top of D3 for composable, declarative data visualization. ## Quick Start ### 1. Install Recharts ```bash npm install recharts ``` ### 2. Basic Chart Structure All Recharts charts follow the same pattern: ```jsx import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const data = [ { name: 'Jan', sales: 4000, profit: 2400 }, { name: 'Feb', sales: 3000, profit: 1398 }, { name: 'Mar', sales: 2000, profit: 9800 }, ]; ``` ## Core Concepts ### Data Format Recharts expects data as an **array of objects**. Each object represents a data point: ```javascript const data = [ { month: 'Jan', revenue: 4000, expenses: 2400 }, { month: 'Feb', revenue: 3000, expenses: 1398 }, ]; ``` Use `dataKey` props to map object properties to chart components: - `dataKey="revenue"` - maps to the revenue property - `dataKey={(entry) => entry.revenue - entry.expenses}` - function for computed values ### Component Composition Charts are built by nesting specialized components: **Sizing**: Use the `responsive` prop (v3.3+), `ResponsiveContainer` wrapper, or set `width`/`height` directly **Chart types** (choose one): - `LineChart` - Line and area visualizations - `BarChart` - Bar and column charts - `AreaChart` - Stacked and filled area charts - `PieChart` - Pie and donut charts - `ScatterChart` - Scatter plots and bubble charts - `ComposedChart` - Mixed chart types - `RadarChart` - Radar/spider charts - `RadialBarChart` - Circular bar charts **Common child components**: - `XAxis` / `YAxis` - Axis configuration - `CartesianGrid` - Grid lines - `Tooltip` - Hover information - `Legend` - Series identification - `Line` / `Bar` / `Area` / `Pie` - Data series visualization ## Chart Patterns by Type ### Line Charts ```jsx ``` **Key props**: - `type`: "monotone" (smooth), "linear", "step", "natural" - `stroke`: line color - `strokeWidth`: line thickness - `dot`: point styling (set to `false` to hide) - `activeDot`: hovered point styling - `connectNulls`: true to connect gaps ### Area Charts ```jsx ``` **Stacked areas**: ```jsx ``` ### Bar Charts ```jsx ``` **Key props**: - `fill`: bar color - `radius`: rounded corners [topLeft, topRight, bottomRight, bottomLeft] or single number for all corners - `barSize`: fixed bar width - `stackId`: group bars into stacks - `shape`: custom bar shape (function or element) **Stacked bars**: ```jsx ``` **Rounded stacked bars** (use `BarStack` to round the whole stack): ```jsx import { BarStack } from 'recharts'; ``` ### Pie Charts ```jsx const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; } /> ``` **Key props**: - `innerRadius`: creates donut chart when > 0 - `outerRadius`: pie size - `paddingAngle`: gap between slices - `startAngle` / `endAngle`: partial pie (default: 0 to 360) - `label`: shows values on slices - `shape`: custom render for each slice (replaces deprecated `Cell` component) ### Scatter Charts ```jsx ``` ### Composed Charts Mix multiple chart types: ```jsx ``` ## Responsive Sizing ### Option 1: `responsive` prop (Recharts 3.3+, recommended) Set `responsive` on the chart itself. Uses standard CSS sizing rules: ```jsx {/* chart components */} ``` Works with flexbox and CSS grid layouts. Also supports CSS `style` props: ```jsx {/* chart components */} ``` ### Option 2: `ResponsiveContainer` (older versions) For Recharts < 3.3, wrap chart in `ResponsiveContainer`: ```jsx {/* chart components */} ``` **Critical**: `ResponsiveContainer` must have a parent with defined dimensions. Height must be a number, not a percentage. ### Static sizing Set `width` and `height` directly as pixels or percentages: ```jsx {/* chart components */} ``` ## Axes Configuration ### XAxis / YAxis Props ```jsx `$${value}`} // format labels angle={-45} // rotate labels textAnchor="end" // text alignment height={60} // extra space for labels /> ``` ### Axis Types - **Category axis** (default for X): Treats values as discrete labels - **Number axis** (default for Y): Treats values as continuous scale ### Custom Domains Control axis range: ```jsx // Fixed range // Auto with padding // Data-based with overflow allowed // Logarithmic scale ``` ## Customization ### Custom Tooltip ```jsx const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{`${label}`}

{`Sales: ${payload[0].value}`}

Additional info...

); } return null; }; } /> ``` ### Custom Legend ```jsx const CustomLegend = ({ payload }) => (

{entry.value}

); } /> ``` ### Custom Shapes **Custom bar shape**: ```jsx const CustomBar = (props) => { const { x, y, width, height, fill } = props; return ; }; } dataKey="sales" /> // OR } dataKey="sales" /> ``` ### Custom Labels ```jsx // Custom label component } /> ``` ### Styling **Chart styles**: ```jsx ``` **Axis styling**: ```jsx ``` **Grid styling**: ```jsx ``` ## Interactions ### Active Elements and Interaction Control The `Tooltip` component controls active element highlighting. Do not use `activeIndex` prop (removed in v3). **Tooltip interaction props**: - `defaultIndex`: Sets initial highlighted item on render - `active`: If true, tooltip remains active after interaction ends - `trigger`: `"hover"` (default) or `"click"` for click-based interaction - `content`: Custom content or `() => null` to hide tooltip text while keeping highlight - `cursor`: Visual cursor in plot area, set to `false` to hide ```jsx {/* Click-based interaction with hidden tooltip text */} null} cursor={false} /> {/* Default highlighted item on render */} ``` ### Click Events ```jsx console.log(e)}> console.log('Bar clicked:', data)} /> ``` ### Synchronized Charts Link multiple charts with `syncId`: ```jsx {/* components */} {/* components - tooltips synchronize */} ``` ### Brush for Zooming ```jsx {/* other components */} ``` ## Performance Optimization ### 1. Stable References Use `useMemo` and `useCallback` for props: ```jsx // BAD - new function on every render entry.sales * 2} /> // GOOD - stable reference const dataKey = useCallback((entry) => entry.sales * 2, []); ``` ### 2. Memoize Components ```jsx const MemoizedChart = React.memo(({ data }) => ( {/* components */} )); ``` ### 3. Isolate Changing Components Separate frequently updating components: ```jsx const Chart = () => { const [hoveredData, setHoveredData] = useState(null); return ( {/* Static components */} {/* Dynamic overlay */} ); }; ``` ### 4. Debounce Events ```jsx import { useDebouncedCallback } from 'use-debounce'; const handleMouseMove = useDebouncedCallback((e) => { setPosition(e.activeLabel); }, 10); ``` ### 5. Reduce Data Points For large datasets, consider aggregation: ```jsx // Bin data before rendering const binnedData = useMemo(() => { return d3.bin().value(d => d.x)(rawData); }, [rawData]); ``` ## Accessibility Recharts includes built-in accessibility support: ```jsx ``` **Accessibility is enabled by default**. The chart is keyboard navigable and screen reader compatible. **ARIA props**: ```jsx ``` ## Common Patterns ### Multiple Data Series ```jsx ``` ### Horizontal Bar Chart ```jsx ``` ### Donut Chart ```jsx const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; } /> ``` > **Note**: `Cell` component is deprecated and will be removed in Recharts 4.0. Use the `shape` prop on `Bar`, `Pie`, `Scatter`, etc. instead. ### Reference Lines/Areas ```jsx {/* ... */} ``` ### Error Bars ```jsx ``` ## Integration Patterns ### With State Management ```jsx const SalesChart = () => { const [timeRange, setTimeRange] = useState('month'); const data = useSelector(state => selectSalesData(state, timeRange)); return ( {/* components */} ); }; ``` ### With Real-time Data ```jsx const RealtimeChart = () => { const [data, setData] = useState([]); useEffect(() => { const interval = setInterval(() => { setData(prev => [...prev.slice(-20), newDataPoint]); }, 1000); return () => clearInterval(interval); }, []); return ( ); }; ``` ## Z-Index and Layering (v3.4+) Components render in a default order (grid < axes < chart elements < tooltip/legend). Override with `zIndex` prop: ```jsx // Render on top ``` For components without direct `zIndex` support, wrap in `ZIndexLayer`: ```jsx import { ZIndexLayer } from 'recharts'; ``` ## Coordinate Systems Recharts has three coordinate systems: 1. **Domain coordinates** - Data values (e.g., `x="March"`, `y=5000`). Used by `ReferenceLine`, `ReferenceDot`, `ReferenceArea`. Automatically converted to pixels. 2. **Pixel coordinates** - Positions relative to chart viewBox. Used for custom SVG shapes. Access via `usePlotArea()`, `useOffset()`, `useChartWidth()` hooks. 3. **Mouse event coordinates** - Browser viewport coordinates. Convert with `getRelativeCoordinate(event, element)`. **Converting between systems**: - Data to pixels: `useXAxisScale()`, `useYAxisScale()` - Pixels to data: `useXAxisInverseScale()`, `useYAxisInverseScale()` ## Troubleshooting ### Chart Not Rendering - Ensure `ResponsiveContainer` has a parent with defined dimensions - Check that height is a number (not percentage in ResponsiveContainer) - Verify data is an array of objects ### Tooltip Not Showing - Ensure Tooltip component is included - Check that dataKey values exist in data objects ### Axis Labels Overlapping - Rotate labels: `` - Use interval: `` (0 = show all, 'preserveStartEnd' = auto) ### Animation Issues - Disable: `` - Reduce duration: `` ## Resources ### References - **[API Reference](references/api_reference.md)** - Complete component props and API details - **[Examples](references/examples.md)** - Common chart patterns and code snippets - **[Best Practices](references/best_practices.md)** - Performance and design guidelines ### External Resources - [Official Documentation](https://recharts.github.io/en-US/) - [Storybook](https://recharts.github.io/en-US/storybook/) - [GitHub](https://github.com/recharts/recharts)

recharts

Install this skill

Comments