Charts

Overview

Flux Dashboard uses Recharts for all data visualization. Charts are embedded across the 5 dashboard variations and showcased on the dedicated /charts page. All charts respect the OKLCh color tokens and work seamlessly in both light and dark modes.

Available Chart Types

Chart Color Palette

Five chart colors are defined as CSS custom properties in globals.css, with separate values for light and dark modes. Use them with var(--chart-1) through var(--chart-5) in chart fills and strokes. Tailwind classes like bg-chart-1 and text-chart-1 are also available for legends and badges.

Common Patterns

ResponsiveContainer

Every chart is wrapped in a Recharts ResponsiveContainer for automatic width adaptation. Standard heights are 320px for main charts, 48px for sparklines, and 176px diameter for donut charts.

Custom Tooltips

All charts use custom tooltip components styled to match the design system: rounded-lg border border-border bg-popover px-3 py-2 shadow-xl. This ensures consistent look in both light and dark modes.

Axis Configuration

Axes hide their lines and ticks (axisLine={false} tickLine={false}) and use var(--muted-foreground) for label color. Grid lines use var(--border) with dashed strokes and horizontal-only display.

Gradient Fills

Area charts use SVG linearGradient definitions that fade from 25% opacity at the top to 0% at the bottom, creating a clean filled area effect.

Adding a New Chart

To add a chart to any page, import the components from recharts and wrap them in a Card:

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { Card, CardHeader, CardTitle, CardContent } from "@dashboardpack/core/components/ui/card";

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 600 },
];

export function MyChart() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Monthly Sales</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={320}>
          <BarChart data={data}>
            <CartesianGrid strokeDasharray="3 3" vertical={false}
              stroke="var(--border)" strokeOpacity={0.5} />
            <XAxis dataKey="name" axisLine={false} tickLine={false}
              tick={{ fill: "var(--muted-foreground)", fontSize: 12 }} />
            <YAxis axisLine={false} tickLine={false}
              tick={{ fill: "var(--muted-foreground)", fontSize: 12 }} />
            <Tooltip />
            <Bar dataKey="value" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}

Chart Data

All chart data lives in src/lib/data/. Analytics data is in analytics.ts and charts showcase data is in charts.ts. Types are defined in types.ts and re-exported from src/lib/data/index.ts. Dashboard variation pages (eCommerce, CRM, SaaS) define their chart data inline within the page component.

Next Steps

Learn about the Testing setup, or see the Theming guide to customize chart colors.