> 
  

<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. The Svelte
port uses [LayerChart](https://www.layerchart.com/) for chart rendering
and [shadcn-svelte](https://shadcn-svelte.com) for its registry and UI
conventions.

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

## One engine, every chart

Every chart is a compound component: the root owns the data and the config, and the visible parts
are children. Same parts, same config object, same gradients, patterns and reveal animations across
every chart type.

```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. For
example: `npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/layerchart-area-chart.json`.

## 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).

## 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)                                           |
| Licence          | MIT, for both the original and this port                                                                       |
| Svelte port      | [mielsense/evilcharts-sv](https://github.com/mielsense/evilcharts-sv)           |
| Port author      | [Mathis](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`, and Svelte 5 in place of the original React stack.