Overview

aSaaSin uses Recharts for data-viz in the dashboard. Colors come from CSS variables (--chart-1…5) so dark mode switches automatically. See Recharts docs: recharts.org.

Chart colors

Colors live in CSS as HSL tuples and are referenced with hsl(var(--chart-1)). You already have the tokens in @layer base:

/* excerpt from app/globals.css */
:root {
  --chart-1: 32 91% 61%;
  --chart-2: 160 36% 52%;
  --chart-3: 210 36% 58%;
  --chart-4: 39 100% 70%;
  --chart-5: 348 70% 55%;
}
.dark {
  --chart-1: 24 92% 70%;
  --chart-2: 148 25% 55%;
  --chart-3: 210 45% 65%;
  --chart-4: 45 100% 65%;
  --chart-5: 350 70% 65%;
}

Using CSS variables means you can write fill="hsl(var(--chart-1))" and the browser resolves it for both light and dark themes.

Theming via shadcn/ui

ChartContainer from shadcn/ui maps series names to CSS variables, so you don’t hardcode colors inside charts. Define a config once and use var(--color-*) in your Recharts elements. See: Chart Theming.

// components/ui/charts - mapping used by shadcn/ui ChartContainer
import type { ChartConfig } from '@/components/ui/chart';

export const chartConfig = {
  revenue: { label: 'Revenue', color: 'hsl(var(--chart-1))' },
  churn:   { label: 'Churn',   color: 'hsl(var(--chart-2))' },
} satisfies ChartConfig;

// ChartContainer will inject:
//   --color-revenue: hsl(var(--chart-1))
//   --color-churn:   hsl(var(--chart-2))
// Use them in Recharts (in Components docs):
//   stroke="var(--color-revenue)"  fill="var(--color-churn)"

ChartContainer maps your series keys to CSS variables so colors come from tokens. See shadcn/ui: Chart Theming.

Client component

Charts render in the browser. Keep chart files as client components and wrap with ResponsiveContainer for sizing. Composition and usage are covered later in Components → Charts.