Charts

FeatureRecharts

Data visualization with Recharts — React-native charting for dashboards, analytics, and reports.

Read this when adding charts to your app.
Useful for dashboards, analytics pages, or any data visualization.

Why Recharts

Recharts is built specifically for React. It uses a declarative component API that feels natural in React apps — compose charts with JSX just like any other component.

It's well-documented, actively maintained, and handles responsive sizing automatically. The defaults are sensible, so you can get a good-looking chart with minimal configuration.

Chart Types

Recharts supports many visualization types:

Line & Area

Trends over time. Line charts, area charts, and sparklines for time series data.

Bar & Column

Compare categories. Vertical, horizontal, and stacked bar charts.

Pie & Donut

Part of whole. Pie charts and donut charts for composition data.

Catalyst Integration

Catalyst wraps Recharts in themed components:

components/vendor/charts/

Themed chart components ready to use

app/(examples)/examples/analytics/

Example analytics dashboard with various charts

app/(examples)/examples/dashboard/

Dashboard example with overview charts

Quick Start

Basic area chart

import {
  AreaChart, Area, XAxis, YAxis,
  CartesianGrid, Tooltip, ResponsiveContainer
} from "recharts"

const data = [
  { month: "Jan", value: 400 },
  { month: "Feb", value: 300 },
  { month: "Mar", value: 500 },
]

export function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Area
          type="monotone"
          dataKey="value"
          stroke="var(--color-primary)"
          fill="oklch(from var(--color-primary) l c h / 0.2)"
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}

Bar chart with multiple series

import { BarChart, Bar, XAxis, YAxis, Legend, ResponsiveContainer } from "recharts"

const data = [
  { name: "Q1", sales: 400, returns: 24 },
  { name: "Q2", sales: 300, returns: 13 },
  { name: "Q3", sales: 500, returns: 18 },
]

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Legend />
        <Bar dataKey="sales" fill="var(--color-primary)" />
        <Bar dataKey="returns" fill="var(--color-muted-foreground)" />
      </BarChart>
    </ResponsiveContainer>
  )
}

Theming

Use CSS variables for consistent theming:

// Use CSS variables for colors
stroke="var(--color-primary)"
fill="var(--color-primary)"

// For transparency, use oklch
fill="oklch(from var(--color-primary) l c h / 0.2)"

// Common theme-aware colors
var(--color-primary)           // Brand color
var(--color-muted-foreground)  // Secondary data
var(--color-border)            // Grid lines
var(--color-background)        // Tooltip background

Tips

Always use ResponsiveContainer. It makes charts resize properly within their parent container.

Set a fixed height. ResponsiveContainer needs a height — the parent or the component itself must specify one.

Use "monotone" for smooth lines. The type prop on Area/Line components affects curve interpolation.

Format numbers in tooltips. Use the formatter prop on Tooltip to display currencies, percentages, etc.

Learn More

Recharts DocumentationExamples GalleryAPI Reference

For AI Agents

Key rules:

  • Check components/vendor/charts/ for existing wrappers
  • Always wrap charts in ResponsiveContainer
  • Use CSS variables for theme-aware colors
  • See /examples/analytics for usage patterns
  • Import directly from "recharts" package