How to Build a Data Visualization Dashboard with Charts in React

Charts make data actionable. Here is how to build a dashboard with interactive charts using Recharts.

Step 1: Install Recharts

pnpm add recharts

Step 2: Line Chart — Revenue Over Time

"use client";

import {
  LineChart as RechartsLineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

const revenueData = [
  { month: "Jan", revenue: 4000, target: 4500 },
  { month: "Feb", revenue: 3000, target: 4500 },
  { month: "Mar", revenue: 5000, target: 4500 },
  { month: "Apr", revenue: 4780, target: 5000 },
  { month: "May", revenue: 5890, target: 5000 },
  { month: "Jun", revenue: 6390, target: 5500 },
  { month: "Jul", revenue: 7490, target: 6000 },
];

export function RevenueChart() {
  return (
    <div className="rounded-xl border bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
      <h3 className="mb-4 font-semibold">Revenue Over Time</h3>
      <ResponsiveContainer width="100%" height={300}>
        <RechartsLineChart data={revenueData}>
          <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
          <XAxis dataKey="month" fontSize={12} />
          <YAxis fontSize={12} tickFormatter={(v) => `$${v}`} />
          <Tooltip formatter={(v: number) => `$${v.toLocaleString()}`} />
          <Line
            type="monotone"
            dataKey="revenue"
            stroke="#3b82f6"
            strokeWidth={2}
            dot={{ r: 4 }}
          />
          <Line
            type="monotone"
            dataKey="target"
            stroke="#9ca3af"
            strokeWidth={1}
            strokeDasharray="5 5"
            dot={false}
          />
        </RechartsLineChart>
      </ResponsiveContainer>
    </div>
  );
}

Step 3: Bar Chart — Sales by Category

"use client";

import {
  BarChart as RechartsBarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

const salesData = [
  { name: "Electronics", sales: 4000, returns: 240 },
  { name: "Clothing", sales: 3000, returns: 138 },
  { name: "Home", sales: 2000, returns: 98 },
  { name: "Sports", sales: 2780, returns: 108 },
  { name: "Books", sales: 1890, returns: 48 },
  { name: "Food", sales: 2390, returns: 38 },
];

export function SalesChart() {
  return (
    <div className="rounded-xl border bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
      <h3 className="mb-4 font-semibold">Sales by Category</h3>
      <ResponsiveContainer width="100%" height={300}>
        <RechartsBarChart data={salesData}>
          <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
          <XAxis dataKey="name" fontSize={12} />
          <YAxis fontSize={12} />
          <Tooltip />
          <Bar dataKey="sales" fill="#3b82f6" radius={[4, 4, 0, 0]} />
          <Bar dataKey="returns" fill="#ef4444" radius={[4, 4, 0, 0]} />
        </RechartsBarChart>
      </ResponsiveContainer>
    </div>
  );
}

Step 4: Pie Chart — Traffic Sources

"use client";

import {
  PieChart as RechartsPieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts";

const trafficData = [
  { name: "Organic Search", value: 4500 },
  { name: "Direct", value: 2100 },
  { name: "Social Media", value: 1800 },
  { name: "Referral", value: 1200 },
  { name: "Email", value: 900 },
];

const COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];

export function TrafficChart() {
  return (
    <div className="rounded-xl border bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
      <h3 className="mb-4 font-semibold">Traffic Sources</h3>
      <ResponsiveContainer width="100%" height={300}>
        <RechartsPieChart>
          <Pie
            data={trafficData}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            paddingAngle={2}
            dataKey="value"
          >
            {trafficData.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
          <Legend />
        </RechartsPieChart>
      </ResponsiveContainer>
    </div>
  );
}

Step 5: Area Chart — User Growth

"use client";

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

const userGrowthData = [
  { month: "Jan", users: 1200, activeUsers: 900 },
  { month: "Feb", users: 1500, activeUsers: 1100 },
  { month: "Mar", users: 1800, activeUsers: 1300 },
  { month: "Apr", users: 2100, activeUsers: 1600 },
  { month: "May", users: 2800, activeUsers: 2100 },
  { month: "Jun", users: 3500, activeUsers: 2700 },
  { month: "Jul", users: 4200, activeUsers: 3200 },
];

export function UserGrowthChart() {
  return (
    <div className="rounded-xl border bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
      <h3 className="mb-4 font-semibold">User Growth</h3>
      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={userGrowthData}>
          <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
          <XAxis dataKey="month" fontSize={12} />
          <YAxis fontSize={12} />
          <Tooltip />
          <defs>
            <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
            </linearGradient>
            <linearGradient id="colorActive" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
              <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
            </linearGradient>
          </defs>
          <Area
            type="monotone"
            dataKey="users"
            stroke="#3b82f6"
            fill="url(#colorUsers)"
            strokeWidth={2}
          />
          <Area
            type="monotone"
            dataKey="activeUsers"
            stroke="#10b981"
            fill="url(#colorActive)"
            strokeWidth={2}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

Step 6: Complete Dashboard Layout

import { RevenueChart } from "./RevenueChart";
import { SalesChart } from "./SalesChart";
import { TrafficChart } from "./TrafficChart";
import { UserGrowthChart } from "./UserGrowthChart";

export function AnalyticsDashboard() {
  const stats = [
    { label: "Total Revenue", value: "$34,590", change: "+12.5%" },
    { label: "Total Users", value: "4,200", change: "+8.3%" },
    { label: "Conversion Rate", value: "3.2%", change: "+0.4%" },
    { label: "Avg. Order Value", value: "$68", change: "-2.1%" },
  ];

  return (
    <div className="space-y-6">
      {/* KPI Cards */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <div
            key={stat.label}
            className="rounded-xl border bg-white p-6 dark:border-gray-700 dark:bg-gray-900"
          >
            <p className="text-sm text-gray-500">{stat.label}</p>
            <p className="mt-1 text-2xl font-bold">{stat.value}</p>
            <p
              className={`mt-1 text-sm ${
                stat.change.startsWith("+")
                  ? "text-green-600"
                  : "text-red-600"
              }`}
            >
              {stat.change} vs last month
            </p>
          </div>
        ))}
      </div>

      {/* Charts Grid */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <RevenueChart />
        <SalesChart />
        <UserGrowthChart />
        <TrafficChart />
      </div>
    </div>
  );
}

Need an Analytics Dashboard?

We build data visualization dashboards with interactive charts, real-time metrics, and reporting tools. Contact us to discuss your project.