How to Create a Bar Chart in React (Step by Step)

What We'll Build

In this tutorial we'll build a fully responsive, animated vertical bar chart in React using Recharts. By the end you'll have a production-ready component you can drop into any project.

Step 1: Install Recharts

npm install recharts

Recharts requires React 16.8+ and works with both JavaScript and TypeScript projects.

Step 2: Prepare Your Data

Recharts expects an array of objects. Each object represents one bar on the chart.

const data = [
  { month: 'Jan', revenue: 4200 },
  { month: 'Feb', revenue: 5800 },
  { month: 'Mar', revenue: 3900 },
  { month: 'Apr', revenue: 7200 },
  { month: 'May', revenue: 6100 },
  { month: 'Jun', revenue: 8900 },
];

Step 3: Build the Basic Chart

'use client'; // Next.js only
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export default function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#00e5a0" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

Step 4: Add Custom Colors Per Bar

Use the Cell component to color each bar individually:

import { Bar, Cell } from 'recharts';

const COLORS = ['#00e5a0', '#4a9eff', '#ff6b6b', '#ffd166', '#c77dff', '#06d6a0'];

<Bar dataKey="revenue" radius={[6, 6, 0, 0]}>
  {data.map((_, i) => (
    <Cell key={i} fill={COLORS[i % COLORS.length]} />
  ))}
</Bar>

Step 5: Custom Tooltip

const CustomTooltip = ({ active, payload, label }: any) => {
  if (active && payload?.length) {
    return (
      <div style={{ background: '#13161a', border: '1px solid #2a3038', borderRadius: 8, padding: '10px 14px' }}>
        <p style={{ color: '#5c6370', margin: 0, fontSize: 12 }}>{label}</p>
        <p style={{ color: '#00e5a0', margin: '4px 0 0', fontWeight: 700 }}>
          VALUE
        </p>
      </div>
    );
  }
  return null;
};

// Then pass it to BarChart:
<Tooltip content={<CustomTooltip />} />

Step 6: Make It Responsive

The ResponsiveContainer component automatically resizes the chart to fit its parent element. Set width="100%" and a fixed height in pixels.

Common Mistakes

• Forgetting ResponsiveContainer: Without it your chart won't resize on mobile.
• Not adding 'use client' in Next.js: Recharts uses browser APIs and must be a client component.
• Hardcoded width/height: Always use percentages for width inside ResponsiveContainer.

Full Copy-Paste Component

You can find the full production-ready bar chart component on the Vertical Bar Chart page with live preview and one-click copy.