Data Visualization in React with Recharts
Recharts makes it easy to add beautiful, responsive charts to your React app. This guide walks through building a dashboard with line and bar charts.
Data visualization is a core part of many web applications. Recharts is a composable charting library built specifically for React — it uses SVG, is fully responsive, and has a clean declarative API that feels natural in React codebases.
Installation
npm install rechartsYour First Chart: Monthly Revenue
Let's build a line chart showing monthly revenue. First, define your data:
const revenueData = [
{ month: 'Jan', revenue: 4200, expenses: 2400 },
{ month: 'Feb', revenue: 5800, expenses: 2800 },
{ month: 'Mar', revenue: 5200, expenses: 3100 },
{ month: 'Apr', revenue: 7800, expenses: 3400 },
{ month: 'May', revenue: 8500, expenses: 3800 },
{ month: 'Jun', revenue: 9200, expenses: 4100 },
]Now build the chart component:
'use client'
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from 'recharts'
export function RevenueChart({ data }: { data: typeof revenueData }) {
return (
<ResponsiveContainer width="100%" height={350}>
<LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="month"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
/>
<YAxis
tick={{ fill: 'hsl(var(--muted-foreground))' }}
tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
/>
<Tooltip
formatter={(value) => [`$${value.toLocaleString()}`, '']}
contentStyle={{
backgroundColor: 'hsl(var(--background))',
border: '1px solid hsl(var(--border))',
borderRadius: '8px',
}}
/>
<Legend />
<Line
type="monotone"
dataKey="revenue"
stroke="hsl(var(--primary))"
strokeWidth={2}
dot={{ r: 4 }}
activeDot={{ r: 6 }}
/>
<Line
type="monotone"
dataKey="expenses"
stroke="hsl(var(--destructive))"
strokeWidth={2}
strokeDasharray="5 5"
dot={{ r: 4 }}
/>
</LineChart>
</ResponsiveContainer>
)
}Always wrap Recharts components in ResponsiveContainer to make them responsive. Set a fixed height but use width="100%".
Bar Chart: Category Breakdown
Bar charts are great for comparing categories:
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
const categoryData = [
{ name: 'Design', value: 35 },
{ name: 'Engineering', value: 55 },
{ name: 'Marketing', value: 20 },
{ name: 'Sales', value: 40 },
]
export function CategoryChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<BarChart data={categoryData} layout="vertical">
<XAxis type="number" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis dataKey="name" type="category" width={90} tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<Tooltip />
<Bar dataKey="value" fill="hsl(var(--primary))" radius={[0, 4, 4, 0]} />
</BarChart>
</ResponsiveContainer>
)
}Tips for Production Use
- Use
ResponsiveContainerfor all charts - Sync chart colours with your CSS variables for dark mode support
- Add
aria-labelto chart containers for accessibility - Memoize data transformations with
useMemoto avoid unnecessary re-renders
Recharts is my go-to for React dashboards. Its composable API means you can build exactly the chart you need without fighting the library.
Related Posts
Why Your LLM App Feels Slow (And It's Not the Model)
An LLM generating 50 tokens/second isn't slow — but if your UI makes the user stare at a spinner for the first 2 seconds, it feels slow. Most LLM latency is a UX problem, not an infrastructure problem.
TypeScript Patterns I Actually Use in Production AI Apps
AI SDK types are a mess if you let them be. Here are the TypeScript patterns I've settled on for handling streaming responses, tool calls, and structured LLM output without losing type safety.
Building Beautiful UIs with shadcn/ui
shadcn/ui gives you beautifully designed, accessible components that you own and control. Here's how to set it up and start building.