Svelte 5 port
| |

Installation

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Install EvilCharts and add charts to your project

EvilCharts components are installed as source in a Svelte 5 project. Set up LayerChart and shadcn-svelte once, then add only the charts you need.

Steps
0

Install LayerChart

LayerChart powers every EvilCharts component and is a required dependency.

See the LayerChart getting-started guide .

npm install layerchart
0

Set up shadcn-svelte

Initialize shadcn-svelte to configure Tailwind CSS, themes, and the component structure. Skip this step if your project already uses it.

See the shadcn-svelte installation guide .

npx shadcn-svelte@latest add init
0

Add an EvilCharts component

Add a chart with the CLI. Replace {chart-name} with a registry name such as layerchart-area-chart, layerchart-bar-chart, layerchart-line-chart, or layerchart-pie-chart. The CLI installs the component source and its dependencies.

npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/{chart-name}.json

After installation, give each chart root an accessible name. The shared accessibility prop accepts a direct label or the ID of visible text through labelledBy. See

Accessibility for the complete example.

Use with AI agents

Evil Charts for Svelte is available through Context7 MCP. Give your coding agent the exact library ID /mielsense/evilcharts-sv so it reads this Svelte port instead of the original React project.

Use Context7 library /mielsense/evilcharts-sv for EvilCharts Svelte docs.
Open the Evil Charts for Svelte Context7 page .
Was this page helpful?