Skip to main content

Recharts

What is Recharts​

Recharts is a declarative React charting library built on D3 submodules that renders SVG charts using composable React components. It is MIT licensed, currently at version 3.8.0, with ~16.7M weekly npm downloads and ~26.8k GitHub stars. Recharts supports a wide range of chart types: Line, Area, Bar, Pie, Radar, Scatter, Radial Bar, Treemap, Funnel, Sankey, Composed, and Boxplot.

shadcn/ui uses Recharts as its built-in charting primitive — if your project already uses shadcn/ui, Recharts is your default charting engine.

Why we recommend it​

  • React-idiomatic composition — charts are built by nesting <LineChart>, <XAxis>, <Tooltip>, etc., the same way you compose any React UI.
  • shadcn/ui integration — shadcn/ui's chart components are thin wrappers around Recharts, so adopting it is zero-friction if you already use shadcn/ui.
  • First-class TypeScript support — the codebase is 98.5% TypeScript; types are accurate, not afterthought @types packages.
  • Large ecosystem & community — 16M+ weekly downloads and 26k+ stars mean answers, examples, and community plugins are plentiful.
  • Low learning curve — if you know React and JSX, you already know the mental model; no separate configuration language to learn.

When to use​

  • Standard dashboard charts — line, area, bar, pie, radar, scatter, composed
  • Projects using shadcn/ui where charts should match the existing component style
  • Teams that want React-idiomatic, component-based chart construction
  • Use cases with moderate data volumes (up to a few thousand points per series)

When NOT to use​

  • Data sets exceeding ~10k points per series — SVG rendering will degrade; consider Apache ECharts instead
  • Geographic / map visualizations — Recharts has no map chart type
  • 3D visualizations, gauge charts, or graph/network diagrams
  • Non-React projects — Recharts is tightly coupled to React

Why over Apache ECharts​

  • Simpler API — composable JSX vs. JSON option objects.
  • Smaller bundle — only pulls in the D3 submodules actually used.
  • Better styling integration — SVG elements are easy to style with Tailwind utility classes or CSS; ECharts' Canvas output is harder to theme consistently (see Tailwind CSS).
  • shadcn/ui alignment — no adapter layer needed; ECharts requires a third-party React wrapper.

If you need complex chart types, huge data sets, or maps, see Apache ECharts.

tip

If you're already using shadcn/ui, start with its built-in chart components — they wrap Recharts and give you consistent styling for free. Only drop down to raw Recharts APIs when you need customization the wrappers don't expose.

Resources​