Chart Config

Every Evil Chart component accepts a chartConfig object. It maps each data key to its display metadata — labels, colors (with theme support), and optional icons shown in tooltips and legends.

import { type ChartConfig } from "@/registry/ui/chart";
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: MonitorIcon,
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  mobile: {
    label: "Mobile",
    icon: SmartphoneIcon,
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

Each key (e.g. desktop, mobile) must match a data key in your dataset. Its type:

type ChartConfig = Record<
  string,
  {
    label?: React.ReactNode;
    icon?: React.ComponentType;
    colors?: {
      light?: string[];
      dark?: string[];
    };
  }
>;

label

The name shown in tooltips and legends. A string or any React.ReactNode.

const chartConfig = {
  desktop: {
    label: "Desktop Users",
    // ...
  },
} satisfies ChartConfig;

colors

Theme-aware color arrays. Provide at least one theme key (light or dark); each holds an array of CSS color strings.

Single color — one color per theme for a solid fill:

colors: {
  light: ["#047857"],
  dark: ["#10b981"],
}

Multiple colors — an array creates gradient fills across bars, areas, and other elements, evenly distributed across the series:

colors: {
  light: ["#a855f7", "#6366f1", "#3b82f6"],
  dark: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"],
}

Themes can define different color counts — the chart distributes them using the max count across all themes.

icon

An optional React component that replaces the default color indicator in the tooltip and legend — useful for distinguishing series beyond color.

import { Monitor, Smartphone } from "lucide-react";
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: Monitor,
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
  mobile: {
    label: "Mobile",
    icon: Smartphone,
    colors: { light: ["#be123c"], dark: ["#f43f5e"] },
  },
} satisfies ChartConfig;

The icon renders in place of the color dot/square in tooltips and the color indicator in legends. It's styled with text-muted-foreground and sized h-2.5 w-2.5 in tooltips, h-3 w-3 in legends.

The chart config generates CSS custom properties scoped to each chart instance. A key desktop with colors ["#a855f7", "#6366f1"] produces:

--color-desktop-0: #a855f7;
--color-desktop-1: #6366f1;

Chart components, tooltips, and legends read these variables for consistent theming. Switching between light and dark mode swaps in the correct set automatically.

Color Distribution

When you provide fewer colors than segments need, they're evenly distributed across slots:

• 2 colors for 4 slots: [red, red, pink, pink]
• 3 colors for 4 slots: [red, pink, blue, blue]

So 2-3 gradient stops smoothly span any number of data points.

The config is validated at runtime. An empty colors object, or one without a valid theme key, throws a clear error:

[EvilCharts] Invalid chart config for "desktop": colors object must
have at least one theme key (light, dark). Received empty object or
invalid keys.

Default (Labels + Colors)

Labels and theme-aware colors. The label shows in the tooltip and legend; the colors control the fill.

With Icons

Pass an icon component per entry to replace the default color indicator in the tooltip and legend.

Gradient Colors

Pass multiple colors per theme for gradient fills. Each array value is a stop distributed across the chart elements.