Evil Charts for Svelte

https://github.com/mielsense/evilcharts-sv
Admin
Installable Svelte 5 chart components with parallel LayerChart and Apache ECharts providers,...
Tokens:95,534
Snippets:911
Trust Score:8
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
================
LIBRARY RULES
================
- Use the Svelte 5 examples and the provider-specific LayerChart or Apache ECharts component APIs from this repository.
- Keep provider names explicit: LayerChart components use the Evil*Chart prefix and Apache ECharts components use the ECharts*Chart prefix.
- 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.

================
CODE SNIPPETS
================
### Install dependencies for manual setup

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

Install the required dependencies 'layerchart' and 'motion' for the manual installation.

```bash
layerchart motion
```

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

### Install dependencies manually

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

Install the required dependencies layerchart and @humanspeak/svelte-motion.

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

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

### Install 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 pie chart component.

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

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

### Install the EvilCharts Svelte agent skill

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

Use this command to install the EvilCharts Svelte agent skill via the skills CLI. The skill teaches agents about all chart families, rendering providers, compound components, examples, blocks, registry installation, accessibility, motion, dither rendering, and provider mixing boundaries.

```bash
npx skills add mielsense/evilcharts-sv --skill evilcharts-svelte
```

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

### Install via CLI

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

Use the CLI to install the radial chart package.

```bash
@evilcharts/echarts-radial-chart
```

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

### Install via CLI

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

Run the CLI command to install the @evilcharts/layerchart-composed-chart package.

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

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

### Install via CLI

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

Use the CLI command to install the line chart component package.

```bash
@evilcharts/layerchart-line-chart
```

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

### Install layerchart dependency

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

Install the layerchart dependency required for the radar chart.

```bash
layerchart
```

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

### Install layerchart-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 install the layerchart-radar-chart component.

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

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

### Install layerchart-sankey-chart via CLI

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

Use this command to install the Sankey chart package via the CLI.

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

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

### Install @evilcharts/echarts-area-chart via CLI

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

Use the CLI to install the area chart package. This is the quickest way to add the component to your project.

```bash
@evilcharts/echarts-area-chart
```

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

### Install @evilcharts/echarts-composed-chart via CLI

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

Use this command to install the composed chart component package via the CLI.

```bash
@evilcharts/echarts-composed-chart
```

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

### Install LayerChart area chart

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

Install the LayerChart area chart component using the npx shadcn-svelte CLI. The URL points to the LayerChart provider version.

```bash
npx shadcn-svelte@latest add https://charts.miel.my/r/layerchart-area-chart.json
```

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

### Label property example

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

Shows how to set the label property for a data series. The label is used in tooltips and legends.

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

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

### Solid fill colors example

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

Provides a single color per theme to create a solid fill for the series.

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

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

### Install echarts dependency

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

Install the echarts library as a dependency for the area chart component.

```bash
echarts
```

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

### Icon property example

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

Shows how to set an icon component for each data series. The icon replaces the default color indicator in tooltips and legends.

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

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

### Prompt agent to use evilcharts-svelte skill for LayerChart area chart

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

Example prompt that names the skill and desired outcome, allowing the agent to select the provider, registry item, and closest documented example without guessing from the original React library.

```text
Use the evilcharts-svelte skill to add an accessible LayerChart area chart with a clickable legend
and reduced-motion support. Start from the closest documented example.
```

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

### Prompt agent to use evilcharts-svelte skill for ECharts bar block

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

Example prompt for a complete dashboard composition, asking for a block rather than a basic example, to be adapted to monthly revenue data.

```text
Use the evilcharts-svelte skill to find an ECharts bar block with supporting metrics, then adapt it
to monthly revenue data.
```

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

### Gradient fill colors example

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

Provides multiple colors per theme to create gradient fills across bars, areas, and other elements. The chart distributes them evenly across the series.

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

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

### Install ECharts area chart

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

Install the ECharts provider version of the area chart by changing the item prefix to 'echarts'. This is an alternative to the LayerChart installation.

```bash
npx shadcn-svelte@latest add https://charts.miel.my/r/echarts-area-chart.json
```

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

### Basic composable EvilBarChart with imports

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

The bar chart is composable: EvilBarChart is the container and compound members (Grid, XAxis, YAxis, Legend, Tooltip, Bar) are children. Each Bar sets its own variant, radius, glowing, bufferBar, and isClickable, so one chart can mix fill styles and make only some series interactive. This example shows the required imports and a basic chart with a default stack type, a hatched variant, and clickable legend and bars.

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

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

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

### onChange

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

Callback fired when the brush selection range changes. Provides the new start and end indices of the selection.

```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 start index of the selection.
  - **endIndex** (number) - The end index of the selection.

### Returns
`void`
```

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

### Import EChartsBarChart and ChartConfig

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

Import the EChartsBarChart component and ChartConfig type from the EvilCharts library. This is the required setup for using the bar chart.

```svelte
<script lang="ts">
	import {
		EChartsBarChart,
		type ChartConfig
	} from '$lib/components/evilcharts/charts/echarts-bar-chart/index.js';
</script>
```

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

### Import EChartsRadarChart and ChartConfig

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

Import the EChartsRadarChart component and ChartConfig type from the EvilCharts library. This is the required setup for using the radar chart.

```svelte
<script lang="ts">
	import {
		EChartsRadarChart,
		type ChartConfig
	} from '$lib/components/evilcharts/charts/echarts-radar-chart/index.js';
</script>
```

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

### Use EvilAreaChart component

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

Example of using the EvilAreaChart compound component. The root owns data, config, and shared selection state; children are the visible parts. Requires Svelte 5 runes and imports from '$lib/components/evilcharts/charts/layerchart-area-chart/index.js'.

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

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

### Import EChartsAreaChart and ChartConfig

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

Import the EChartsAreaChart component and the ChartConfig type from the EvilCharts library. This is the required setup for using the area chart.

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

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

### Reacting to Brush Range Changes with onChange

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

Pass onChange to the Brush component to receive the visible range as data indices. The example stores the range in a Svelte state variable and shows a comment for accessing the date labels.

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

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

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

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

### Add EChartsAreaChart.Tooltip with variant, roundness, and position props

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

Place <EChartsAreaChart.Tooltip /> as a child of the chart root. It reads data and config from context, so no props are required for a working tooltip. This example sets variant="frosted-glass", roundness="md", and position="fixed".

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

<EChartsAreaChart {data} config={chartConfig}>
	<EChartsAreaChart.Tooltip variant="frosted-glass" roundness="md" position="fixed" />
</EChartsAreaChart>
```

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

### EChartsAreaChart with compound children

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

Example of the EChartsAreaChart component with its compound children: Grid, XAxis, Brush, Legend, Tooltip, and multiple Area components. Each Area sets its own variant, strokeVariant, and isClickable. The chart uses a stacked type and a config object.

```svelte
<EChartsAreaChart {data} config={chartConfig} stackType="stacked">
	<EChartsAreaChart.Grid />
	<EChartsAreaChart.XAxis dataKey="month" />
	<EChartsAreaChart.Brush />
	<EChartsAreaChart.Legend isClickable />
	<EChartsAreaChart.Tooltip />
	<EChartsAreaChart.Area dataKey="desktop" variant="gradient" strokeVariant="dashed" isClickable />
	<EChartsAreaChart.Area dataKey="mobile" variant="hatched" strokeVariant="solid" isClickable />
</EChartsAreaChart>
```

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

### pnpm commands for development, testing, and registry management

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

Run these commands in the repository root. Requires Node 22.18+ (up to Node 24) and pnpm 10.22. The build command runs registry:fresh first, and the test command runs all test suites.

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

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

### Interactive selection with onSelectionChange

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

Shows how to handle selection changes with the onSelectionChange callback on the chart root, logging the selected data key or a deselection message.

```svelte
<EChartsComposedChart
	{data}
	config={chartConfig}
	onSelectionChange={(selectedDataKey) => {
		if (selectedDataKey) {
			console.log('Selected:', selectedDataKey);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EChartsComposedChart.XAxis dataKey="month" />
	<EChartsComposedChart.Legend isClickable />
	<EChartsComposedChart.Tooltip />
	<EChartsComposedChart.Bar dataKey="revenue" isClickable />
	<EChartsComposedChart.Line dataKey="profit" isClickable />
</EChartsComposedChart>
```

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

### Link

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

Configures how links render.

```APIDOC
## Link

### Description
Configures how links render.

### Props

#### variant ("gradient" | "solid" | "source" | "target", default: "gradient")
The visual variant for links. `"gradient"` uses a gradient, `"solid"` uses a solid color, `"source"` uses the source node's color, and `"target"` uses the target node's color.
```

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

### Grid

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

The background grid lines. Include it to draw the dashed horizontal split lines; omit it and they don't. Takes no props.

```APIDOC
## Grid

### Description
The background grid lines. Include it to draw the dashed horizontal split lines; omit it and they don't. Takes no props.
```

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

### Node

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

Configures how nodes render. Compose a NodeLabel inside to show labels and values.

```APIDOC
## Node

### Description
Configures how nodes render. Compose a `<NodeLabel />` inside to show labels and values.

### Props

#### radius (number, default: 0)
The corner radius of node rectangles in pixels. Set to 0 for square nodes.

#### isClickable (boolean, default: false)
Lets nodes be clicked to select or deselect them. Selected nodes highlight while the rest, and their links, dim.

#### children (Snippet)
Optional `<NodeLabel />` composition.
```

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

### Basic EvilRadarChart with data and config

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

Defines sample data and a chartConfig satisfying ChartConfig, then renders the EvilRadarChart with polar grid, angle axis, legend, tooltip, and two radar series (desktop and mobile).

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

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

### Add Tooltip to Bar Chart

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

Use this Svelte component to add a tooltip to an EvilBarChart. The example includes XAxis, Tooltip with variant and roundness props, and a Bar.

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

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

### Import EvilPieChart and ChartConfig

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

Imports the EvilPieChart component and the ChartConfig type from the layerchart-pie-chart module.

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

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

### Line

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

Documentation for the Line component, a single line series.

```APIDOC
## Line

### Description
A single line series. Each `<Line />` generates its own gradient and glow definitions, so a chart can hold any number — each with its own stroke, glow, and clickability.

### Props
- **dataKey** (`string`) - Required - The series key. Must exist on both the data rows and the chart `config`.
- **strokeVariant** (`"solid" | "dashed" | "animated-dashed"`) - Optional, default `"solid"` - This line's stroke style.
- **strokeWidth** (`number`) - Optional, default `0.8` - Stroke thickness for this line, in pixels.
- **curveType** (`"basis" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter" | …`) - Optional - The curve interpolation for this line. Falls back to the chart's `curveType` when omitted.
- **animationType** (`"none" | "left-to-right" | "right-to-left" | "center-out" | "edges-in"`) - Optional - The intro reveal animation for this line. Falls back to the chart's `animationType` when omitted.
- **connectNulls** (`boolean`) - Optional, default `false` - Whether to connect line segments across null or missing values.
- **isClickable** (`boolean`) - Optional, default `false` - Lets this line be selected by clicking it. When any line is selected, unselected lines become semi-transparent.
- **glowing** (`boolean`) - Optional, default `false` - Applies a soft outer glow to this line.
- **enableBufferLine** (`boolean`) - Optional, default `false` - Renders this line's last segment as a dashed buffer while the rest stays solid. Useful for indicating projected or incomplete data at the end of a series.
- **children** (`Snippet`) - Optional - Additional content to render inside the line.
```

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

### EvilPieChart, Pie, and Label API

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

API reference for the EvilPieChart, Pie, and Label components, documenting their props and usage.

```APIDOC
## EvilPieChart

### Description
The root container for the pie chart. Owns the data, shared selection state, and loading skeleton; all visuals are composed as its children.

### Props
- **data** (`TData[]`) - Required - An array of objects, one per sector (`TData extends Record<string, unknown>`).
- **dataKey** (`keyof TData & string`) - Required - Data key for sector values — typically numbers that set sector size.
- **nameKey** (`keyof TData & string`) - Required - Data key for sector names — the strings used in labels and legend.
- **config** (`ChartConfig`) - Required - Defines each sector's colors. Keys should match the values from your `nameKey` field.
- **children** (`Snippet`) - Required - The composed chart parts — `<Legend />`, `<Tooltip />`, `<Background />`, and one `<Pie />`.
- **accessibility** (`ChartAccessibility`) - Optional - Names and optionally describes the chart wrapper. It remains a group, so interactive legends and marks stay available to assistive technology.
- **className** (`string`) - Optional - Extra CSS classes for the chart container.
- **defaultSelectedSector** (`string | null`, default `null`) - Optional - Sector name selected by default.
- **selectedSector** (`string | null`) - Optional - Controls the selected sector. Leave it undefined to let the chart manage selection; pass `null` to clear a controlled selection.
- **onSelectionChange** (`(selection: { dataKey: string; value: number } | null) => void`) - Optional - Fires when a sector is selected or deselected via a clickable `<Pie />` sector or `<Legend />` entry. Receives an object with `dataKey` (sector name) and `value` (sector value), or `null` when deselected.
- **isLoading** (`boolean`, default `false`) - Optional - Shows a placeholder animation while data loads.
- **renderStyle** (`"svg" | "dither"`, default `"svg"`) - Optional - Selects the SVG or ordered-dither renderer.
- **ditherVariant** (`"gradient" | "dotted" | "hatched" | "solid"`, default `"gradient"`) - Optional - Default texture for dithered sectors.
- **ditherCellSize** (`number`, default `2`) - Optional - Dither cell size in CSS pixels.
- **bloom** (`"off" | "low" | "high" | "aura"`, default `"off"`) - Optional - Optional bounded glow around dither pixels.
- **chartProps** (`ComponentProps<typeof PieChart>`) - Optional - Extra props forwarded to the underlying LayerChart Chart. See the [LayerChart Chart documentation](https://www.layerchart.com/docs/components/Chart).

## Pie

### Description
The pie series. Self-contained — it generates its own gradients and glow filters, so any number of pies coexist on a page without style collisions. Compose a `<Label />` inside it to draw sector labels.

### Props
- **innerRadius** (`number | string`, default `0`) - Optional - Inner radius of the pie; set above 0 for a donut. Number (pixels) or percentage string.
- **outerRadius** (`number | string`, default `"80%"`) - Optional - Outer radius of the pie. Number (pixels) or percentage string.
- **cornerRadius** (`number`, default `0`) - Optional - Corner radius of each sector, in pixels.
- **paddingAngle** (`number`, default `0`) - Optional - Padding between sectors, in degrees. Negative values overlap sectors.
- **startAngle** (`number`, default `0`) - Optional - Starting angle, in degrees (0 is 3 o'clock, 90 is 12 o'clock).
- **endAngle** (`number`, default `360`) - Optional - Ending angle, in degrees. Below 360 draws a partial pie.
- **isClickable** (`boolean`, default `false`) - Optional - Lets users click sectors to select/deselect them; selecting one dims the rest.
- **glowingSectors** (`string[]`, default `[]`) - Optional - Array of sector names (values from your `nameKey` field) to give a smooth outer glow.
- **children** (`Snippet`) - Optional - Optional `<Label />` that draws labels on each sector.
- **pieProps** (`Omit<ComponentProps<typeof Pie>, "data" | "dataKey" | "nameKey">`) - Optional - Escape hatch for raw props forwarded to the underlying LayerChart Arc. See the [LayerChart Arc documentation](https://www.layerchart.com/docs/components/Arc).

## Label

### Description
Per-sector labels composed inside a `<Pie />`. Renders nothing itself — the parent `<Pie />` reads its props and draws the label list over the sectors.

### Props
- **dataKey** (`string`) - Optional - Data key for label text. Falls back to the chart's `dataKey` when omitted.
```

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

### Handle selection changes with onSelectionChange

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

Shows how to use the onSelectionChange callback on the root EvilSankeyChart to log selected node dataKey and value, or log 'Deselected' when selection is cleared.

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

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

### Tooltip

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

Configuration for the hover tooltip that labels each bar by name. Its presence enables the tooltip; omit it and none shows. Hidden automatically while loading.

```APIDOC
## Tooltip

### Description
Configuration for the hover tooltip that labels each bar by name. Its presence enables the tooltip; omit it and none shows. Hidden automatically while loading.

### Properties
- **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 this data point index.
- **position** ("fixed" | "variable") - Optional - How the tooltip is anchored. "variable" lets it follow the pointer (the default). "fixed" pins the tooltip near the top of the chart and only tracks the pointer's X. Default: "variable".
```

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

### Basic EChartsRadarChart with data and config

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

Defines sample data and a chartConfig that maps data keys to labels and per-theme colors. The chart renders two radar series with filled variants, a polar grid, angle axis, legend, tooltip, and dots.

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

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

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

### Brush Configuration

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

Configuration options for the brush component, which provides an interactive zoom range below the chart.

```APIDOC
## Brush Configuration

### Description
An optional zoom brush below the chart, driven by ECharts' native `dataZoom`. Include `<EChartsBarChart.Brush />` to render it; dragging the range filters the main chart.

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

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

### Import EChartsPieChart and ChartConfig

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

Import the EChartsPieChart component and ChartConfig type from the EvilCharts library.

```svelte
<script lang="ts">
	import {
		EChartsPieChart,
		type ChartConfig
	} from '$lib/components/evilcharts/charts/echarts-pie-chart/index.js';
</script>
```

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

### Interactive selection with onSelectionChange

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

Shows how to make lines selectable by adding isClickable and handling selection changes with the onSelectionChange callback on EvilLineChart.

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

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

### Main chart component

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

Paste this code into $lib/components/evilcharts/ui/layerchart-chart.

```svelte
<ComponentSource name="layerchart-chart" title="$lib/components/evilcharts/ui/layerchart-chart" />
```

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

### Basic EvilComposedChart with config and data

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

Defines a chartConfig object satisfying ChartConfig and renders an EvilComposedChart with Grid, XAxis, YAxis, Legend, Tooltip, a gradient Bar, and a dashed Line with custom Dot and ActiveDot.

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

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

### Loading state with isLoading

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

Passes isLoading to show an animated skeleton polygon. The data is empty and the chart displays a loading placeholder instead of actual data.

```svelte
<EChartsRadarChart data={[]} config={chartConfig} isLoading>
	<EChartsRadarChart.PolarGrid />
	<EChartsRadarChart.PolarAngleAxis dataKey="skill" />
	<EChartsRadarChart.Legend />
	<EChartsRadarChart.Tooltip />
	<EChartsRadarChart.Radar dataKey="desktop" variant="filled" />
	<EChartsRadarChart.Radar dataKey="mobile" variant="filled" />
</EChartsRadarChart>
```

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

### Link

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

Configures how the sankey links render.

```APIDOC
## Link

### Description
Configures how the sankey links render.

### Properties
- **variant** ("gradient" | "solid" | "source" | "target", default: "gradient") - Optional - The coloring strategy for links. `"gradient"` fades from source to target color, `"solid"` uses the foreground color, `"source"` uses the source node color, `"target"` uses the target node color.
- **verticalPadding** (number, default: 0) - Optional - Accepted for parity with the LayerChart sibling. ECharts sizes each link band to its value with no per-link inset, so this prop has no effect.

```

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

### Basic EvilRadialChart usage with data and config

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

Basic usage of the composable radial chart: import EvilRadialChart and ChartConfig, define data and chartConfig, then render the chart with Legend, Tooltip, and RadialBar compound components. The chartConfig uses satisfies ChartConfig and defines light/dark colors per data key.

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

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

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

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

### Tooltip

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

The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads selection state, dimming unselected series in its content.

```APIDOC
## Tooltip

### Description
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads selection state, dimming unselected series in its content.

### Props
- **variant** ("default" | "frosted-glass") - Optional, default: "default" - The visual style of the tooltip surface.
- **roundness** ("sm" | "md" | "lg" | "xl") - Optional, default: "lg" - Controls the border-radius of the tooltip.
- **cursor** (boolean) - Optional, default: true - Whether the vertical cursor line follows the pointer on hover.
```

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

### Import EChartsLineChart and ChartConfig

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

Import the EChartsLineChart component and ChartConfig type from the EvilCharts library.

```svelte
<script lang="ts">
	import {
		EChartsLineChart,
		type ChartConfig
	} from '$lib/components/evilcharts/charts/echarts-line-chart/index.js';
</script>
```

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

### Tooltip (Chart Component)

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

Enables and configures the hover tooltip, including style and default visibility.

```APIDOC
## [Chart Component] Tooltip

### Description
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads the selection state and dims unselected series.

### Properties
- **variant** (string, default: `"default"`) - The visual style of the tooltip surface: `"default"`, `"frosted-glass"`.
- **roundness** (string, default: `"lg"`) - Controls the border-radius of the tooltip: `"sm"`, `"md"`, `"lg"`, `"xl"`.
- **defaultIndex** (number, optional) - Shows the tooltip by default at this data point index.
- **cursor** (boolean, default: true) - Whether the vertical cursor line follows the pointer on hover.
```

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

### Render EvilSankeyChart with Node, Link, Tooltip

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

Renders the EvilSankeyChart with data and config, including a clickable Node with outside labels showing values, a Link with variant 'source', and a Tooltip.

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

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

### Basic EChartsLineChart with Grid, Axes, Legend, Tooltip, and Lines

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

A basic line chart with grid, axes, legend, tooltip, and two lines with different stroke variants and dot styles.

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

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

### EvilLineChart

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

Documentation for the EvilLineChart component, the root container for the line chart.

```APIDOC
## EvilLineChart

### Description
The root container for the line chart. It owns the data, selection state, loading skeleton, and optional brush; everything visual is composed as children.

### Props
- **data** (`TData[]`) - Required - The chart data — an array of objects, each a data point (`TData extends Record<string, unknown>`).
- **config** (`Record<string, ChartConfig[string]>`) - Required - Defines the chart's series. Each key matches a data key, with a color or color array.
- **children** (`Snippet`) - Required - The composed chart parts — `<Grid />`, `<XAxis />`, `<YAxis />`, `<Legend />`, `<Tooltip />`, and one or more `<Line />`.
- **accessibility** (`ChartAccessibility`) - Optional - Names and optionally describes the chart wrapper. It remains a group, so interactive legends and marks stay available to assistive technology.
- **className** (`string`) - Optional - Extra CSS classes for the chart container.
- **curveType** (`"basis" | "bumpX" | "bumpY" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | …`) - Optional, default `"linear"` - The default curve interpolation for every `<Line />`; each can override it locally.
- **animationType** (`"none" | "left-to-right" | "right-to-left" | "center-out" | "edges-in"`) - Optional, default `"left-to-right"` - Direction of the intro reveal for every `<Line />`. `"none"` disables it; the OS reduce-motion preference falls back to `"none"` automatically.
- **defaultSelectedDataKey** (`string | null`) - Optional, default `null` - The data key selected by default.
- **onSelectionChange** (`(selectedDataKey: string | null) => void`) - Optional - Fires when a series is selected or deselected via a clickable `<Line />` or `<Legend />`. Receives the data key, or `null` when deselected.
- **isLoading** (`boolean`) - Optional, default `false` - Shows a shimmer loading skeleton while data is being fetched.
- **loadingPoints** (`number`) - Optional, default `14` - Data points shown in the loading skeleton.
- **xDataKey** (`keyof TData & string`) - Optional - The x-axis data key. Only the brush footer needs it — the axis reads its key from `<XAxis dataKey="…" />`.
- **renderStyle** (`"svg" | "dither"`) - Optional, default `"svg"` - Selects the SVG or ordered-dither renderer.
- **ditherVariant** (`"gradient" | "dotted" | "hatched" | "solid"`) - Optional, default `"gradient"` - Default texture for dithered series.
- **ditherCellSize** (`number`) - Optional, default `2` - Dither cell size in CSS pixels.
- **bloom** (`"off" | "low" | "high" | "aura"`) - Optional, default `"off"` - Optional bounded glow around dither pixels.
- **chartProps** (`ComponentProps<typeof LineChart>`) - Optional - Extra props forwarded to the underlying LayerChart Chart. See the [LayerChart Chart documentation](https://www.layerchart.com/docs/components/Chart).
```

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

### Basic Brush Usage with EChartsAreaChart

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

Adds the Brush component as a child of the chart root. Requires xDataKey on the root or dataKey on XAxis for handle labels. The brush footer shows a miniature of the full dataset with a draggable selection window.

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

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

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

### Render EvilPieChart with legend, tooltip, and pie

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

Renders the EvilPieChart with data, dataKey, nameKey, and config, including a clickable legend, tooltip, and a pie with custom shape props and a label.

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

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

### Import EChartsSankeyChart and types

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

Import the EChartsSankeyChart component and its associated types (ChartConfig, SankeyData) from the library's index.js.

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

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

### Base layerchart-composed-chart component

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

Paste this code into $lib/components/evilcharts/charts/layerchart-composed-chart.

```svelte
<ComponentSource name="layerchart-composed-chart" title="$lib/components/evilcharts/charts/layerchart-composed-chart" />
```
Tokens:
Raw