This is a Svelte 5 port of EvilCharts with ordered-dither chart variants adapted from Dither Kit.
/mielsense/evilcharts-sv. Give that ID to the agent so it reads this Svelte port rather
than the original React implementation:
```text
Use Context7 library /mielsense/evilcharts-sv for EvilCharts Svelte docs.
```
[Open the EvilCharts for Svelte Context7 page](https://context7.com/mielsense/evilcharts-sv).
Agents without either integration can read [the documentation index](/llms.txt),
[the full documentation snapshot](/llms-full.txt), or connect to the
[documentation MCP endpoint](/mcp).
---
## Changelog
> Changes to the installable EvilCharts for Svelte library and source registry.
Source: https://evilcharts-sv.vercel.app/docs/changelog
Markdown: https://evilcharts-sv.vercel.app/docs/changelog.md
This page records changes to the installable Svelte port, its source registry, and its agent skill.
Docs-only, test-only, CI, and contributor-workflow changes are recorded in their pull requests.
## 2026-08-30
- Added ECharts counterparts for every LayerChart dashboard block and aligned shared block data,
palettes, supporting metrics, and responsive compositions across providers. The ECharts Bar API
now includes isometric bars, reference lines, and row-hover callbacks; ECharts Radar series add
dashed strokes and optional glow for those compositions.
- Preserved null and non-finite data as real gaps across ECharts Area, Line, and Composed charts,
including their brushes, reveal layers, buffer lines, hit targets, and tooltips.
- Gave both Sankey providers the same guarded data contract and expanded ECharts keyboard and
controlled-selection coverage across chart families.
- Unified registry source rewriting and consumer dependency versions across generated installs.
- Added the installable `evilcharts-svelte` agent skill, with skills.sh-compatible and HTTP discovery, a
complete chart and compound-component catalog, implementation workflows, example and block
guidance, plus links to the Markdown docs, Context7 library, and MCP endpoint.
- Added controlled selection to LayerChart Area and Pie roots without remounting chart state, and
made ECharts resolve chart-local color changes after mount.
- Hardened LayerChart Sankey layout for invalid endpoints, cycles, zero-flow graphs, and numeric
edge cases while preserving valid Recharts-compatible geometry.
- Added Apache ECharts as a complete second rendering provider for all eight chart families, with
Canvas rendering by default and optional SVG output.
- Added provider-specific ECharts tooltips, legends, dots, brushes, loading states, examples,
dashboard blocks, registry items, documentation, and agent-readable pages.
- Added ordered-dither treatments for the ECharts area, line, bar, composed, pie, and radar charts,
preserving the Dither Kit attribution and licence boundary.
- Added a provider switcher so readers can move between matching LayerChart and ECharts pages.
- Fixed production renderer registration so Canvas and SVG charts still initialize after
tree-shaking.
- Aligned ECharts legends, brushes, basic Area geometry, loading states, and radial chart clearance
with the original provider layouts.
- Kept Area loading geometry fixed while its Line-style top stroke and translucent fill use the same
travelling shimmer mask; loading data changes only after that mask leaves the plot.
- Matched the data and chart configuration of all 113 upstream LayerChart examples and mirrored
the same examples in the ECharts provider, apart from the six documented dither additions.
- Preserved chart-owned animation lifecycles when consumer ECharts options are merged and made
loading, dashed-stroke, hover, and landing motion respect reduced-motion preferences.
- Restored the original ECharts Bar, Pie, and Radial entrances by initializing each renderer only
after its primary compound series is registered; Composed bars now use the same grow lifecycle.
- Made LayerChart Cartesian entrances use one uninterrupted chart-owned timeline, preventing
scale remounts from shortening or restarting reveals, and matched Area and Line wipe speed to
the ECharts provider.
- Added keyboard controls for clickable series and ECharts brush ranges without duplicating an
existing clickable legend.
- Aligned shared theme tokens and legend spacing with the original, and made generated chart CSS
safe for arbitrary chart IDs and data keys.
## 2026-08-27
- Loading states now match the original chart geometry, including cartesian category spacing,
Area chart domain headroom, Radial chart ring placement, and Pie chart legend clearance.
- Area loading curves now remain static while the shimmer crosses the plot, matching the original.
- Area loading now renders its moving top stroke with the same masked spline as Line loading,
while the shimmer continues through the gradient fill beneath it.
- Radial loading bars now tween between values with the original 1.5-second ease-in-out motion.
- Radial plots now reserve the full edge-legend band so outer rings cannot overlap the legend.
## 2026-08-25
- Tooltips now escape cards with `overflow: hidden` while keeping chart-scoped series colors.
---
## Chart Config
> Define labels, colors, and icons for each data series
Source: https://evilcharts-sv.vercel.app/docs/chart-config
Markdown: https://evilcharts-sv.vercel.app/docs/chart-config.md
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.
## Structure
```svelte
```
Each key (e.g. `desktop`, `mobile`) must match a data key in your dataset. Its type:
```ts
type ChartConfig = Record<
string,
{
label?: string | Snippet;
icon?: Component;
colors?: {
light?: string[];
dark?: string[];
};
}
>;
```
## Properties
### label
The name shown in tooltips and legends. A string or any `Snippet`.
```ts
const chartConfig = {
desktop: {
label: 'Desktop Users' // [!code highlight]
// ...
}
} 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:
```ts
colors: {
light: ["#047857"],
dark: ["#10b981"],
}
```
Multiple colors 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"],
}
```
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.
```svelte
```
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.
## How colors work
The chart config generates CSS custom properties scoped to each chart instance. A key `desktop` with colors `["#a855f7", "#6366f1"]` produces:
```css
--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.
## Runtime validation
The config is validated at runtime. An empty `colors` object, or one without a valid theme key, throws a clear error:
```plaintext
[EvilCharts] Invalid chart config for "desktop": colors object must
have at least one theme key (light, dark). Received empty object or
invalid keys.
```
## Examples
### Default (labels and colors)
Labels and theme-aware colors. The label shows in the tooltip and legend; the colors control the fill.
### Basic chart config
```svelte