Chart Config

Every EvilCharts component uses a chart config object. It maps each data key to its label, theme colors, and optional icon for tooltips and legends.

<script lang="ts">
	import Monitor from '@lucide/svelte/icons/monitor';
	import Smartphone from '@lucide/svelte/icons/smartphone';
	import type { ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart/index.js';

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			icon: Monitor,
			colors: {
				light: ['#047857'],
				dark: ['#10b981']
			}
		},
		mobile: {
			label: 'Mobile',
			icon: Smartphone,
			colors: {
				light: ['#be123c'],
				dark: ['#f43f5e']
			}
		}
	} satisfies ChartConfig;
</script>

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

type ChartConfig = Record<
	string,
	{
		label?: string | Snippet;
		icon?: Component;
		colors?: {
			light?: string[];
			dark?: string[];
		};
	}
>;

label

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

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.

One color per theme creates a solid fill:

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

Multiple colors create gradient fills across bars, areas, and other elements. The chart distributes them evenly across the series:

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

Themes can define different color counts. The chart uses the largest count across all themes.

icon

An optional Svelte component that replaces the default color indicator in the tooltip and legend. Use icons when color alone is not enough to distinguish each series.

<script lang="ts">
	import Monitor from '@lucide/svelte/icons/monitor';
	import Smartphone from '@lucide/svelte/icons/smartphone';

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			icon: Monitor,
			colors: { light: ['#047857'], dark: ['#10b981'] }
		},
		mobile: {
			label: 'Mobile',
			icon: Smartphone,
			colors: { light: ['#be123c'], dark: ['#f43f5e'] }
		}
	} satisfies ChartConfig;
</script>

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 and 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.