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.
Was this page helpful?