===============
LIBRARY RULES
===============
From library maintainers:
- Use the Svelte 5 examples and LayerChart component APIs from this repository.
- Install components from the Evil Charts SV shadcn-svelte registry before importing them.
- Do not substitute the original React EvilCharts API for this Svelte port.

### Manual Installation Dependencies

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Install the required motion dependencies for manual setup.

```bash
layerchart motion
```

--------------------------------

### Install Signup benchmark chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/blocks.md

Installs the benchmark area chart component into your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/benchmark-area-chart
```

--------------------------------

### Install Portfolio comparison chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/blocks.md

Installs the portfolio area chart component into your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/portfolio-area-chart
```

--------------------------------

### Install Dependencies Manually

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/static.md

Install the required base packages for the chart components.

```bash
npm install layerchart @humanspeak/svelte-motion
```

--------------------------------

### Install Revenue and Profit Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/blocks.md

Installs the revenue and profit composed chart package.

```bash
npx npx @evilcharts/revenue-composed-chart
```

--------------------------------

### Install Signups Against Target Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/blocks.md

Installs the signups against target composed chart package.

```bash
npx npx @evilcharts/signups-composed-chart
```

--------------------------------

### Install Revenue Mix Pie Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/blocks.md

Installs the revenue mix pie chart component package.

```bash
npx @evilcharts/revenue-mix-pie-chart
```

--------------------------------

### Install Grid Bar Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/blocks.md

Installs the grid bar chart component package.

```bash
npx shadcn@latest add @evilcharts/grid-bar-chart
```

--------------------------------

### Install Audience reach chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/blocks.md

Installs the audience area chart component into your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/audience-area-chart
```

--------------------------------

### Install Market Share Pie Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/blocks.md

Installs the market share pie chart component package.

```bash
npx @evilcharts/market-share-pie-chart
```

--------------------------------

### Install Progress Rings Pie Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/blocks.md

Installs the progress rings pie chart component package.

```bash
npx @evilcharts/progress-rings-pie-chart
```

--------------------------------

### Install Hover Trace Bar Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/blocks.md

Installs the hover trace bar chart component package.

```bash
npx shadcn@latest add @evilcharts/hover-trace-bar-chart
```

--------------------------------

### Install Isometric Bar Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/blocks.md

Installs the isometric bar chart component package.

```bash
npx shadcn@latest add @evilcharts/isometric-bar-chart
```

--------------------------------

### Install Bar Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

Use the CLI command to install the bar chart package.

```bash
npx @evilcharts/layerchart-bar-chart
```

--------------------------------

### Install Payouts Line Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/blocks.md

Command to install the payouts line chart component package.

```bash
npx @evilcharts/payouts-line-chart
```

--------------------------------

### Install Pie Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Use the CLI command to install the necessary package for the pie chart component.

```bash
npx @evilcharts/layerchart-pie-chart
```

--------------------------------

### Install LayerChart Dependency

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Install the required layerchart package manually.

```bash
npm install layerchart
```

--------------------------------

### Install Monthly Budget Radial Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/blocks.md

Use the CLI to add the budget radial chart component to your project.

```bash
npx layerchart@latest add budget-radial-chart
```

--------------------------------

### Install Monospace Bar Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/blocks.md

Installs the monospace bar chart component package.

```bash
npx shadcn@latest add @evilcharts/monospace-bar-chart
```

--------------------------------

### Install Reliability Score Pie Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/blocks.md

Installs the reliability score pie chart component package.

```bash
npx @evilcharts/reliability-score-pie-chart
```

--------------------------------

### Install Revenue Pipeline Sankey Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/blocks.md

Use this command to install the specific package for the revenue pipeline Sankey chart.

```bash
npx @evilcharts/pipeline-sankey-chart
```

--------------------------------

### Install Orders Shipped Line Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/blocks.md

Command to install the shipments line chart component package.

```bash
npx @evilcharts/shipments-line-chart
```

--------------------------------

### Install Latency percentiles chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/blocks.md

Installs the latency area chart component into your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/latency-area-chart
```

--------------------------------

### Install Composed Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/static.md

Use the CLI command to install the composed chart package.

```bash
npx @evilcharts/layerchart-composed-chart
```

--------------------------------

### Install Capability Radar Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radar-chart/blocks.md

Use the CLI to add the capability radar chart block to your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/capability-radar-chart
```

--------------------------------

### Install Fund Allocation Sankey Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/blocks.md

Use this command to install the specific package for the fund allocation Sankey chart.

```bash
npx @evilcharts/allocation-sankey-chart
```

--------------------------------

### Install Ride Summary Radial Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/blocks.md

Use the CLI to add the ride summary radial chart component to your project.

```bash
npx layerchart@latest add ride-radial-chart
```

--------------------------------

### Add an EvilCharts component

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/installation.md

Use the CLI to install specific chart components by providing the registry URL.

```bash
https://evilcharts-sv.vercel.app/r/{chart-name}.json
```

--------------------------------

### Install EvilCharts component

Source: https://github.com/mielsense/evilcharts-sv/blob/main/README.md

Use npx to add a specific chart component to your project.

```bash
npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/layerchart-area-chart.json
```

--------------------------------

### Implement a basic Composed Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/static.md

Example of configuring a chart with mixed bar and line series, including grid, axes, legend, and tooltip components.

```svelte
<script lang="ts">
	const chartConfig = {
		revenue: {
			label: 'Revenue',
			colors: { light: ['#3b82f6'], dark: ['#6A5ACD'] }
		},
		profit: {
			label: 'Profit',
			colors: { light: ['#10b981'], dark: ['#34d399'] }
		}
	} satisfies ChartConfig;
</script>

<EvilComposedChart xDataKey="month" {data} config={chartConfig}>
	<EvilComposedChart.Grid />
	<EvilComposedChart.XAxis dataKey="month" />
	<EvilComposedChart.YAxis />
	<EvilComposedChart.Legend isClickable />
	<EvilComposedChart.Tooltip />
	<EvilComposedChart.Bar dataKey="revenue" variant="gradient" isClickable />
	<EvilComposedChart.Line dataKey="profit" strokeVariant="dashed" isClickable>
		<EvilComposedChart.Dot variant="default" />
		<EvilComposedChart.ActiveDot variant="colored-border" />
	</EvilComposedChart.Line>
</EvilComposedChart>
```

--------------------------------

### Configure Color Arrays

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

Examples of defining solid and gradient color fills for chart themes.

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

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

--------------------------------

### Install Sankey Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Use the CLI to automatically add the Sankey chart dependency to your project.

```bash
npx @evilcharts/layerchart-sankey-chart
```

--------------------------------

### Install Radar Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radar-chart/static.md

Use the CLI command to automatically add the radar chart dependency.

```bash
npx @evilcharts/layerchart-radar-chart
```

--------------------------------

### Implement EvilAreaChart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/README.md

Example of using the EvilAreaChart compound component with data and configuration.

```svelte
<script lang="ts">
	import { EvilAreaChart } from '$lib/components/evilcharts/charts/layerchart-area-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart/index.js';

	const data = [
		{ month: 'January', desktop: 342, mobile: 245 },
		{ month: 'February', desktop: 876, mobile: 654 }
	];

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

<EvilAreaChart {data} config={chartConfig} stackType="stacked">
	<EvilAreaChart.Grid />
	<EvilAreaChart.XAxis dataKey="month" />
	<EvilAreaChart.Legend isClickable />
	<EvilAreaChart.Tooltip />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" isClickable>
		<EvilAreaChart.Dot variant="border" />
		<EvilAreaChart.ActiveDot variant="colored-border" />
	</EvilAreaChart.Area>
</EvilAreaChart>
```

--------------------------------

### Install LayerChart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/installation.md

LayerChart is a required dependency for all EvilCharts components.

```bash
layerchart
```

--------------------------------

### Install Line Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/static.md

Use the CLI command to automatically add the line chart dependency to your project.

```bash
npx @evilcharts/cli@latest add layerchart-line-chart
```

--------------------------------

### Define a ChartConfig object

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

Example of a complete chart configuration object using Svelte and Lucide icons.

```svelte
<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>
```

--------------------------------

### Install Radial Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Use the CLI command to automatically add the radial chart dependency to your project.

```bash
npx @evilcharts/layerchart-radial-chart
```

--------------------------------

### Install Cache Tiers Radial Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/blocks.md

Use the CLI to add the cache tiers radial chart component to your project.

```bash
npx layerchart@latest add cache-tiers-radial-chart
```

--------------------------------

### Install Area Chart via CLI

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/static.md

Use the CLI command to automatically add the area chart dependency to your project.

```bash
npx @evilcharts/cli@latest add @evilcharts/layerchart-area-chart
```

--------------------------------

### Basic stacked area chart implementation

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/static.md

Example of a stacked area chart with multiple series, custom variants, and interactive elements.

```svelte
<EvilAreaChart {data} config={chartConfig} stackType="stacked">
	<EvilAreaChart.Grid />
	<EvilAreaChart.XAxis dataKey="month" />
	<EvilAreaChart.YAxis />
	<EvilAreaChart.Legend isClickable />
	<EvilAreaChart.Tooltip />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" strokeVariant="dashed" isClickable>
		<EvilAreaChart.Dot variant="border" />
		<EvilAreaChart.ActiveDot variant="colored-border" />
	</EvilAreaChart.Area>
	<EvilAreaChart.Area dataKey="mobile" variant="hatched" strokeVariant="solid" isClickable>
		<EvilAreaChart.ActiveDot variant="colored-border" />
	</EvilAreaChart.Area>
</EvilAreaChart>
```

--------------------------------

### CSS Custom Property Generation

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

Example of how the chart config maps color arrays to scoped CSS custom properties.

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

--------------------------------

### Initialize shadcn-svelte

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/installation.md

Configure Tailwind CSS, themes, and component structure using the shadcn-svelte CLI.

```bash
init
```

--------------------------------

### Development Scripts

Source: https://github.com/mielsense/evilcharts-sv/blob/main/README.md

Commands for managing dependencies, running the development server, building, linting, and testing the project.

```bash
pnpm install

pnpm dev              # dev server
pnpm build            # registry:fresh, then a production build
pnpm preview          # serve the production build

pnpm check            # svelte-check (type-check)
pnpm lint             # prettier --check + eslint
pnpm format           # prettier --write

pnpm test:unit        # vitest (client browser project + server node project)
pnpm test:registry    # fresh registry build plus output validation
pnpm test:e2e         # playwright, against the production build
pnpm test             # both

pnpm registry:build   # regenerate __index__.ts, registry.json and static/r/*.json
pnpm registry:fresh   # clean, then rebuild
```

--------------------------------

### Basic Radar Chart Implementation

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radar-chart/static.md

A standard implementation showing data definition, configuration, and component composition.

```svelte
<script lang="ts">
	const data = [
		{ skill: 'JavaScript', desktop: 186, mobile: 80 },
		{ skill: 'TypeScript', desktop: 305, mobile: 200 },
		{ skill: 'React', desktop: 237, mobile: 120 },
		{ skill: 'Node.js', desktop: 173, mobile: 190 },
		{ skill: 'CSS', desktop: 209, mobile: 130 }
	];

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			colors: { light: ['#3b82f6'], dark: ['#60a5fa'] }
		},
		mobile: {
			label: 'Mobile',
			colors: { light: ['#10b981'], dark: ['#34d399'] }
		}
	} satisfies ChartConfig;
</script>

<EvilRadarChart {data} config={chartConfig}>
	<EvilRadarChart.PolarGrid />
	<EvilRadarChart.PolarAngleAxis dataKey="skill" />
	<EvilRadarChart.Legend />
	<EvilRadarChart.Tooltip />
	<EvilRadarChart.Radar dataKey="desktop" variant="filled">
		<EvilRadarChart.Dot variant="colored-border" />
		<EvilRadarChart.ActiveDot variant="default" />
	</EvilRadarChart.Radar>
	<EvilRadarChart.Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>
```

--------------------------------

### Implementing a basic Sankey chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Define the Sankey data and configuration, then render the chart with nodes, links, and tooltips.

```svelte
<script lang="ts">
	const data: SankeyData = {
		nodes: [
			{ name: 'Visit' },
			{ name: 'Direct-Favourite' },
			{ name: 'Page-Click' },
			{ name: 'Detail-Favourite' },
			{ name: 'Lost' }
		],
		links: [
			{ source: 0, target: 1, value: 3728 },
			{ source: 0, target: 2, value: 354170 },
			{ source: 2, target: 3, value: 62429 },
			{ source: 2, target: 4, value: 291741 }
		]
	};

	const chartConfig = {
		Visit: {
			label: 'Visit',
			colors: { light: ['#3b82f6'], dark: ['#60a5fa'] }
		},
		'Page-Click': {
			label: 'Page Click',
			colors: { light: ['#f59e0b'], dark: ['#fbbf24'] }
		}
		// ... more node configs
	} satisfies ChartConfig;
</script>

<EvilSankeyChart {data} config={chartConfig}>
	<EvilSankeyChart.Node isClickable>
		<EvilSankeyChart.NodeLabel position="outside" showValues />
	</EvilSankeyChart.Node>
	<EvilSankeyChart.Link variant="source" />
	<EvilSankeyChart.Tooltip />
</EvilSankeyChart>
```

--------------------------------

### Basic Bar Chart implementation

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

A standard implementation of the bar chart with multiple series and grid components.

```svelte
<EvilBarChart {data} config={chartConfig} stackType="default">
	<EvilBarChart.Grid />
	<EvilBarChart.XAxis dataKey="month" />
	<EvilBarChart.Legend isClickable />
	<EvilBarChart.Tooltip />
	<EvilBarChart.Bar dataKey="desktop" variant="default" isClickable />
	<EvilBarChart.Bar dataKey="mobile" variant="hatched" isClickable />
</EvilBarChart>
```

--------------------------------

### Implement interactive selection

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Handle sector selection using the onSelectionChange callback.

```svelte
<EvilPieChart
	{data}
	dataKey="visitors"
	nameKey="browser"
	config={chartConfig}
	onSelectionChange={(selection) => {
		if (selection) {
			console.log('Selected:', selection.dataKey, 'Value:', selection.value);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilPieChart.Legend isClickable />
	<EvilPieChart.Tooltip />
	<EvilPieChart.Pie isClickable />
</EvilPieChart>
```

--------------------------------

### Defining Chart Data and Configuration

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Prepare the data array and the corresponding configuration object for the radial chart.

```svelte
<script lang="ts">
	const data = [
		{ browser: 'chrome', visitors: 275 },
		{ browser: 'safari', visitors: 200 },
		{ browser: 'firefox', visitors: 187 }
	];

	const chartConfig = {
		chrome: {
			label: 'Chrome',
			colors: { light: ['#3b82f6'], dark: ['#60a5fa'] }
		},
		safari: {
			label: 'Safari',
			colors: { light: ['#10b981'], dark: ['#34d399'] }
		},
		firefox: {
			label: 'Firefox',
			colors: { light: ['#f59e0b'], dark: ['#fbbf24'] }
		}
	} satisfies ChartConfig;
</script>
```

--------------------------------

### Tooltip

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radar-chart/static.md

Configuration for the hover tooltip.

```APIDOC
## Tooltip

### Description
Configures the hover tooltip behavior and appearance.

### Parameters
- **variant** ("default" | "frosted-glass") - Optional - Visual style of the tooltip. Defaults to "default".
- **roundness** ("sm" | "md" | "lg" | "xl") - Optional - Border-radius of the tooltip. Defaults to "lg".
- **defaultIndex** (number) - Optional - Shows the tooltip by default at this data point index.
```

--------------------------------

### Implement a basic EvilAreaChart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/index.md

Use the root component to own data and configuration, then compose the chart using child components like Grid, XAxis, and Area.

```svelte
<EvilAreaChart {data} config={chartConfig}>
	<EvilAreaChart.Grid />
	<EvilAreaChart.XAxis dataKey="month" />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" />
</EvilAreaChart>
```

--------------------------------

### Repository Directory Structure

Source: https://github.com/mielsense/evilcharts-sv/blob/main/README.md

A map of the source code and documentation directories within the project.

```text
src/lib/registry/          the installable product
  charts/                  8 chart modules, one directory each
  ui/                      7 shared primitives
  examples/layerchart/     119 `ex-*` documentation demos
  blocks/layerchart/       22 composed, installable chart blocks
  registry-*.ts            item manifests (names, deps, consumer targets)
  __index__.ts             generated; never edit by hand

src/site/                  the documentation site
  components/docs/         docs chrome, previews, the markdown component map
  components/ui/           site primitives on bits-ui
  components/landing/      the animated landing showcase
  lib/                     source loader, highlighter, agent surfaces, mdsvex plugins

content/docs/              the documentation, as markdown
src/routes/                the SvelteKit app, plus the agent endpoints
scripts/build-registry.ts  writes registry.json, static/r/*.json and __index__.ts
```

--------------------------------

### Tooltip Configuration

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Properties available for configuring the hover tooltip component.

```APIDOC
## Tooltip Configuration

### Description
Configuration properties for the hover tooltip component used in Sankey charts.

### Parameters
- **variant** ("default" | "frosted-glass") - Optional - Controls the visual style of the tooltip. Default: "default".
- **roundness** ("sm" | "md" | "lg" | "xl") - Optional - Controls the border-radius of the tooltip. Default: "lg".
- **defaultIndex** (number) - Optional - When set, shows the tooltip by default at this data point index.
```

--------------------------------

### Configure AI agent context

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/installation.md

Provide the library ID to coding agents to ensure the correct Svelte port is referenced.

```text
Use Context7 library /mielsense/evilcharts-sv for EvilCharts Svelte docs.
```

--------------------------------

### Tooltip

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Configuration for the hover tooltip component.

```APIDOC
## Tooltip

### Parameters
- **variant** ("default" | "frosted-glass") - Optional - Visual style of the tooltip surface. Default: "default"
- **roundness** ("sm" | "md" | "lg" | "xl") - Optional - Border-radius of the tooltip. Default: "lg"
- **defaultIndex** (number) - Optional - Shows the tooltip by default at the given sector index.
```

--------------------------------

### Tooltip

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

Configuration for the hover tooltip component.

```APIDOC
## Tooltip

### Properties
- **variant** ('default' | 'frosted-glass') - The visual style of the tooltip surface.
- **roundness** ('sm' | 'md' | 'lg' | 'xl') - Border-radius of the tooltip.
- **defaultIndex** (number) - Shows the tooltip by default at this data point index.
```

--------------------------------

### Implement basic EvilLineChart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/static.md

A standard implementation showing multiple lines with different stroke variants and dot configurations.

```svelte
<EvilLineChart {data} config={chartConfig} curveType="monotone">
	<EvilLineChart.Grid />
	<EvilLineChart.XAxis dataKey="month" />
	<EvilLineChart.YAxis />
	<EvilLineChart.Legend isClickable />
	<EvilLineChart.Tooltip />
	<EvilLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable>
		<EvilLineChart.Dot variant="border" />
		<EvilLineChart.ActiveDot variant="colored-border" />
	</EvilLineChart.Line>
	<EvilLineChart.Line dataKey="mobile" strokeVariant="dashed" glowing>
		<EvilLineChart.ActiveDot variant="default" />
	</EvilLineChart.Line>
</EvilLineChart>
```

--------------------------------

### Importing Radial Chart Components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Import the main chart container and configuration type from the library.

```svelte
<script lang="ts">
	import { EvilRadialChart } from '$lib/components/evilcharts/charts/layerchart-radial-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Background

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Configuration for the decorative background pattern.

```APIDOC
## Background

### Parameters
- **variant** (BackgroundVariant) - Optional - The background pattern style. Default: "dots"
```

--------------------------------

### Brush

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

Configuration for the zoom brush component.

```APIDOC
## Brush

### Properties
- **height** (number) - Height of the brush preview strip in pixels.
- **formatLabel** ((value: unknown, index: number) => string) - Formats the range-handle labels.
- **onChange** ((range: { startIndex: number; endIndex: number }) => void) - Fires when the brush selection range changes.
```

--------------------------------

### Label

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Component for rendering labels on pie sectors.

```APIDOC
## Label

### Description
Per-sector labels composed inside a Pie component. It reads props from the parent Pie to draw labels over sectors.

### Props
- **dataKey** (string) - Optional - Data key for label text.
- **labelListProps** (Omit<ComponentProps<typeof LabelList>, "dataKey">) - Optional - Escape hatch for label props.
```

--------------------------------

### Render basic EvilPieChart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Compose the pie chart with legend, tooltip, and pie components.

```svelte
<EvilPieChart {data} dataKey="visitors" nameKey="browser" config={chartConfig}>
	<EvilPieChart.Legend isClickable />
	<EvilPieChart.Tooltip />
	<EvilPieChart.Pie isClickable innerRadius={60} paddingAngle={4} cornerRadius={8}>
		<EvilPieChart.Label />
	</EvilPieChart.Pie>
</EvilPieChart>
```

--------------------------------

### Handling Interactive Selection

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Enable interactivity by setting isClickable and handle selection changes via the onSelectionChange callback.

```svelte
<EvilRadialChart
	{data}
	nameKey="browser"
	config={chartConfig}
	onSelectionChange={(selection) => {
		if (selection) {
			console.log('Selected:', selection.dataKey, 'Value:', selection.value);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilRadialChart.Legend isClickable />
	<EvilRadialChart.Tooltip />
	<EvilRadialChart.RadialBar dataKey="visitors" isClickable />
</EvilRadialChart>
```

--------------------------------

### Link

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Configures how links render between nodes.

```APIDOC
## Link

### Description
Configures the rendering and styling of links between nodes.

### Props
- **variant** ('gradient' | 'solid' | 'source' | 'target') - Optional - Default: 'gradient'. Coloring strategy.
- **verticalPadding** (number) - Optional - Default: 0. Vertical padding at connection points.
```

--------------------------------

### Handling interactive node selection

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Enable node selection by setting isClickable and listening to the onSelectionChange callback.

```svelte
<EvilSankeyChart
	{data}
	config={chartConfig}
	onSelectionChange={(selection) => {
		if (selection) {
			console.log('Selected:', selection.dataKey, 'Value:', selection.value);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilSankeyChart.Node isClickable />
	<EvilSankeyChart.Link variant="source" />
	<EvilSankeyChart.Tooltip />
</EvilSankeyChart>
```

--------------------------------

### Basic Tooltip Usage

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/ui/tooltip.md

Integrate the Tooltip component within an EvilBarChart by adding it as a child element.

```svelte
<EvilBarChart {data} config={chartConfig}>
	<EvilBarChart.XAxis dataKey="month" />
	<EvilBarChart.Tooltip variant="frosted-glass" roundness="md" />
	<EvilBarChart.Bar dataKey="desktop" />
</EvilBarChart>
```

--------------------------------

### Handle interactive selection

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/static.md

Use the onSelectionChange callback to respond to user interactions with clickable lines or legend items.

```svelte
<EvilLineChart
	{data}
	config={chartConfig}
	onSelectionChange={(selectedDataKey) => {
		if (selectedDataKey) {
			console.log('Selected:', selectedDataKey);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilLineChart.XAxis dataKey="month" />
	<EvilLineChart.Legend isClickable />
	<EvilLineChart.Tooltip />
	<EvilLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable />
	<EvilLineChart.Line dataKey="mobile" strokeVariant="solid" isClickable />
</EvilLineChart>
```

--------------------------------

### Implement EvilAreaChart.Brush

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/ui/brush.md

Add the Brush component as a child of the chart root to enable range selection. Ensure xDataKey is set on the root for proper handle labeling.

```svelte
<script lang="ts">
	import { EvilAreaChart } from '$lib/components/evilcharts/charts/layerchart-area-chart/index.js';
</script>

<EvilAreaChart {data} config={chartConfig} xDataKey="date">
	<EvilAreaChart.XAxis dataKey="date" />
	<EvilAreaChart.Brush formatLabel={(value) => String(value)} />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" />
</EvilAreaChart>
```

--------------------------------

### Importing EvilBarChart components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

Required imports for the EvilBarChart and its associated configuration types.

```svelte
<script lang="ts">
	import { EvilBarChart } from '$lib/components/evilcharts/charts/layerchart-bar-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Handling interactive series selection

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/area-chart/static.md

Using the isClickable prop and onSelectionChange callback to manage user interactions with chart series.

```svelte
<EvilAreaChart
	{data}
	config={chartConfig}
	onSelectionChange={(selectedDataKey) => {
		if (selectedDataKey) {
			console.log('Selected:', selectedDataKey);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilAreaChart.XAxis dataKey="month" />
	<EvilAreaChart.Legend isClickable />
	<EvilAreaChart.Tooltip />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" isClickable />
	<EvilAreaChart.Area dataKey="mobile" variant="gradient" isClickable />
</EvilAreaChart>
```

--------------------------------

### Tooltip

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

The hover tooltip component for labeling bars.

```APIDOC
## Tooltip

### Props
- **variant** ('default' | 'frosted-glass') - Optional - Visual style (default: 'default').
- **roundness** ('sm' | 'md' | 'lg' | 'xl') - Optional - Border-radius (default: 'lg').
- **defaultIndex** (number) - Optional - Index to show tooltip by default.
```

--------------------------------

### Import EvilPieChart components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Required imports for using the EvilPieChart and ChartConfig types.

```svelte
<script lang="ts">
	import { EvilPieChart } from '$lib/components/evilcharts/charts/layerchart-pie-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Runtime Validation Error

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

The error message displayed when the colors configuration object is missing required theme keys.

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

--------------------------------

### Import EvilComposedChart components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/static.md

Required imports for using the EvilComposedChart and its associated configuration types.

```svelte
<script lang="ts">
	import { EvilComposedChart } from '$lib/components/evilcharts/charts/layerchart-composed-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Chart Root Configuration

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/ui/brush.md

Configuration required on the chart root component to support Brush functionality.

```APIDOC
## Root Configuration

### Description
Configuration properties applied to the chart root (e.g., EvilAreaChart) to enable and support the Brush component.

### Props
- **xDataKey** (string) - Required - The data key the handle labels read from. Without it, the handles fall back to raw indices.
```

--------------------------------

### Import EvilLineChart components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/line-chart/static.md

Required imports for the EvilLineChart and its configuration type.

```svelte
<script lang="ts">
	import { EvilLineChart } from '$lib/components/evilcharts/charts/layerchart-line-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### XAxis and YAxis

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/bar-chart/static.md

Configuration for category and value axes.

```APIDOC
## XAxis and YAxis

### Properties
- **dataKey** (string) - The data key for the axis values.
- **...axisProps** (any) - Every other LayerChart axis prop is forwarded as-is.
```

--------------------------------

### Importing Radar Chart Components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radar-chart/static.md

Required imports for the EvilRadarChart and its associated configuration types.

```svelte
<script lang="ts">
	import { EvilRadarChart } from '$lib/components/evilcharts/charts/layerchart-radar-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Importing EvilSankeyChart components

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Required imports for the Sankey chart and its associated types.

```svelte
<script lang="ts">
	import {
		EvilSankeyChart,
		type SankeyData
	} from '$lib/components/evilcharts/charts/layerchart-sankey-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
```

--------------------------------

### Pie

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

The pie series component that handles rendering of sectors, gradients, and glow filters.

```APIDOC
## Pie

### Description
The pie series component. It generates its own gradients and glow filters, allowing multiple pies to coexist without style collisions.

### Props
- **innerRadius** (number | string) - Optional - Inner radius of the pie.
- **outerRadius** (number | string) - Optional - Outer radius of the pie.
- **cornerRadius** (number) - Optional - Corner radius of each sector.
- **paddingAngle** (number) - Optional - Padding between sectors in degrees.
- **startAngle** (number) - Optional - Starting angle in degrees.
- **endAngle** (number) - Optional - Ending angle in degrees.
- **isClickable** (boolean) - Optional - Enables sector selection.
- **glowingSectors** (string[]) - Optional - Array of sector names to apply an outer glow.
- **children** (Snippet) - Optional - Optional Label component.
- **pieProps** (Omit<ComponentProps<typeof Pie>, "data" | "dataKey" | "nameKey">) - Optional - Raw props forwarded to the underlying LayerChart Arc.
```

--------------------------------

### Node

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/sankey-chart/static.md

Configures how nodes render within the Sankey chart.

```APIDOC
## Node

### Description
Configures the appearance and behavior of nodes. Compose a `<NodeLabel />` inside to show labels.

### Props
- **radius** (number) - Optional - Default: 0. Corner radius in pixels.
- **isClickable** (boolean) - Optional - Default: false. Enables node selection.
- **children** (Snippet) - Optional - Composition for `<NodeLabel />`.
```

--------------------------------

### Configure Label Property

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

Setting the label property for a chart series.

```ts
const chartConfig = {
	desktop: {
		label: 'Desktop Users' // [!code highlight]
		// ...
	}
} satisfies ChartConfig;
```

--------------------------------

### React to Range Changes

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/ui/brush.md

Use the onChange callback to track the current selection indices for external synchronization.

```svelte
<script lang="ts">
	let range = $state({ startIndex: 0, endIndex: data.length - 1 });
</script>

<EvilAreaChart {data} config={chartConfig} xDataKey="date">
	<EvilAreaChart.Brush onChange={(next) => (range = next)} />
	<EvilAreaChart.Area dataKey="desktop" variant="gradient" />
</EvilAreaChart>

<!-- data[range.startIndex].date → data[range.endIndex].date -->
```

--------------------------------

### Configure Icon Property

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/chart-config.md

Using Svelte components as icons within the chart configuration.

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

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

--------------------------------

### Rendering the Radial Chart

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/radial-chart/static.md

Compose the chart using the container and its sub-components.

```svelte
<EvilRadialChart {data} nameKey="browser" config={chartConfig} variant="full">
	<EvilRadialChart.Legend isClickable />
	<EvilRadialChart.Tooltip />
	<EvilRadialChart.RadialBar dataKey="visitors" isClickable />
</EvilRadialChart>
```

--------------------------------

### Legend

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/pie-chart/static.md

Configuration for the sector legend component.

```APIDOC
## Legend

### Parameters
- **variant** ("square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | …) - Optional - Visual style of the legend indicators.
- **align** ("left" | "center" | "right") - Optional - Horizontal placement of the legend. Default: "center"
- **verticalAlign** ("top" | "middle" | "bottom") - Optional - Vertical placement of the legend. Default: "bottom"
- **isClickable** (boolean) - Optional - Lets each legend entry toggle selection of its sector. Default: false
```

--------------------------------

### onChange

Source: https://github.com/mielsense/evilcharts-sv/blob/main/content/docs/layerchart/composed-chart/static.md

The onChange event handler is triggered whenever the brush selection range is modified by the user.

```APIDOC
## onChange

### Description
Fires when the brush selection range changes.

### Signature
(range: { startIndex: number; endIndex: number }) => void

### Parameters
- **range** (object) - Required - The new selection range.
  - **startIndex** (number) - The starting index of the selection.
  - **endIndex** (number) - The ending index of the selection.
```