> 
  

<p>This is a <code>Svelte 5</code> port of <a href="https://github.com/legions-developer/evilcharts" target="_blank" rel="noreferrer" class="text-svelte underline underline-offset-4">EvilCharts</a> with ordered-dither chart variants adapted from <a href="https://github.com/Boring-Software-Inc/dither-kit" target="_blank" rel="noreferrer" class="text-svelte underline underline-offset-4">Dither Kit</a>.</p>




EvilCharts is a set of installable chart components, not a separate charting runtime. Choose
[LayerChart](https://www.layerchart.com/) for
Svelte-rendered SVG or [Apache ECharts](https://echarts.apache.org)
for Canvas with optional SVG rendering. Both providers use the same chart config and
[shadcn-svelte](https://shadcn-svelte.com) registry flow.

## The Problem

Gurbinder created EvilCharts after seeing the same default chart styles repeated across products.
The original project set out to make charts more distinctive without hiding their source code.

> The words below are adapted from Gurbinder's introduction to the original project. This port
> brings that work to Svelte.

There are tons of chart libraries, but none are beautiful. They allow customization, yet everyone just ships the defaults from the docs.

The result is an open-source chart component collection whose code belongs in your project.

## Why is it called EvilCharts?

"Evil" doesn't mean malicious. It means:

- Unapologetically opinionated UI choices
- Design-first, animated, unique designs
- Handcrafted SVG and motion that give each chart a distinct look

## Two providers, one chart API

Every chart is a compound component: the root owns the data and config, and the visible parts are
children. LayerChart components use the `Evil*Chart` prefix; ECharts components use
`ECharts*Chart`. Both providers keep the same composition model, data, variants, and interactions.

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

You install one chart at a time from this port's registry, so you only ship what you choose. Use
`layerchart-area-chart` or `echarts-area-chart` in the registry URL to select the provider.

## Accessibility

Give each chart an accessible name with the root `accessibility` prop. Add a description when the
chart needs context that its name does not provide.

```svelte
<EvilAreaChart
	{data}
	config={chartConfig}
	accessibility={{
		label: 'Monthly traffic',
		description: 'Desktop and mobile visits from January through December.'
	}}
>
	<EvilAreaChart.Legend isClickable />
	<EvilAreaChart.Area dataKey="desktop" isClickable />
	<EvilAreaChart.Area dataKey="mobile" isClickable />
</EvilAreaChart>
```

If visible text already names or describes the chart, pass its element IDs as `labelledBy` and
`describedBy`. The chart wrapper keeps `role="group"`, so interactive legends and chart marks
remain available to assistive technology.

### LayerChart

**SVG, and all of it is in the DOM.** LayerChart renders through Svelte to SVG, so every gradient, pattern, dot and glow is a real element.

- **Themeable without JavaScript.** Series colors compile to per-chart CSS variables, so light and dark modes swap with a class and do not need a re-render.
- **Inspectable.** Open devtools and the whole chart is right there, stylable with the CSS you already use.
- **Composable.** Charts are built from parts, not props. Drop in a `<Grid />`, a `<Legend />`, or a second `<Area />`.

Reach for it by default: product dashboards, marketing pages, anything where the chart is design surface first and data volume second.

Start with [Installation](/docs/layerchart/installation). Labels, colors, and icons
come from one object, which is covered in [Chart Config](/docs/chart-config).

### Apache ECharts

**Canvas by default, with SVG available.** ECharts is a strong fit for dense dashboards and teams
that already use its option model. EvilCharts keeps the compound Svelte API and compiles those
parts into a typed ECharts option.

- **Renderer choice.** Use the Canvas default or pass `renderer="svg"` on any chart root.
- **Native updates.** Data changes interpolate through ECharts rather than replacing the chart.
- **Same source-registry workflow.** Install only the ECharts chart and UI modules you need.

Start with [ECharts installation](/docs/echarts/installation), then browse the
matching chart pages under the ECharts provider.

### Which provider?

Provider selection is a per-chart choice. Start with LayerChart for inspectable, themeable Svelte
SVG charts and design-led dashboards. Move an individual chart to ECharts for dense data, frequent
updates, or an existing ECharts option workflow.

One app or dashboard may mix both providers by rendering separate provider-specific chart roots.
Each compound chart root must use parts from that same provider. Install only one implementation
of a chart unless the app intentionally renders both.

## Use with a coding agent

The official skill teaches coding agents how to choose a provider, install the correct registry
item, compose chart parts, and start from the right example or block. See the
[Agent Skill guide](/docs/agent-skill) for installation, example
prompts, and the Context7 alternative.

## Credits and licence

|                  |                                                                                                                |
| ---------------- | -------------------------------------------------------------------------------------------------------------- |
| Original project | [legions-developer/evilcharts](https://github.com/legions-developer/evilcharts) |
| Original site    | [evilcharts.com](https://evilcharts.com)                                        |
| Original author  | [Gurbinder](https://x.com/legionsdev)                                           |
| LayerChart       | [LayerChart](https://www.layerchart.com/)                                       |
| Apache ECharts   | [Apache ECharts](https://echarts.apache.org/)                                   |
| Licence          | MIT, for both the original and this port                                                                       |
| Svelte port      | [mielsense/evilcharts-sv](https://github.com/mielsense/evilcharts-sv)           |
| Port author      | [miel](https://github.com/mielsense)                                            |

Substantially all of the design, component API, documentation prose and example data in this port
derive from the original project. The Svelte translation uses LayerChart,
`@humanspeak/svelte-motion`, Apache ECharts, and Svelte 5 in place of the original React stack.