Skip to content

# Charts

A guide to the chart types available in Zenith Dashboard, all powered by Recharts with zero additional dependencies.

## Overview

Zenith 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

Type | Component | Used In
--- | --- | ---
Area | AreaChart | Dashboard, eCommerce, SaaS, CRM
Bar | BarChart | Dashboard, Analytics, eCommerce, CRM
Line | LineChart | Analytics
Pie / Donut | PieChart | Dashboard, eCommerce, SaaS, CRM
Sparkline | AreaChart (mini) | Stats cards across all dashboards
Radar | RadarChart | Charts page
Radial Bar / Gauge | RadialBarChart | Charts page
Treemap | Treemap | Charts page
Scatter / Bubble | ScatterChart | Charts page
Composed / Mixed | ComposedChart | Charts page

## 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";
    import type { Metadata } from "next";

    export const metadata: Metadata = {
      title: "Charts",
      description:
        "Use and customise the Recharts-based chart components.",
    };

    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.