Recharts Charts

Compose responsive React charts with Recharts. Builds line, bar, area, pie, and composed charts from SVG primitives with custom tooltips, legends, gradients, reference lines, and responsive containers for dashboards and analytics.

This skill helps you visualize data with Recharts. It assembles declarative charts from composable components (LineChart, BarChart, AreaChart, PieChart, ComposedChart), adds custom tooltips and legends, applies gradients and reference lines, syncs multiple charts, handles responsive sizing with ResponsiveContainer, and wires live data — a fast path to clean, on-brand dashboards without hand-writing D3.

When to use

Use when building dashboards or reports in React that need clean, responsive charts quickly — KPI lines, comparison bars, distributions, or composed multi-series visualizations with custom styling.

Examples

Dashboard revenue chart

Responsive area chart with gradient

Build a Recharts area chart of monthly revenue with a gradient fill, custom tooltip, and a ResponsiveContainer that fills its card

Composed comparison chart

Bars plus a trend line

Create a Recharts ComposedChart showing bars for units sold and an overlaid line for average price, with a shared legend and reference line