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 the evilcharts echarts components in your project

The ECharts provider uses Apache ECharts with Canvas by default and optional SVG rendering — same config contract, same install flow, and a renderer choice on every chart root.

Omit renderer to keep the Canvas default, or pass renderer="svg" to select ECharts’ SVG renderer:

<EChartsAreaChart {data} config={chartConfig}>
	<!-- Canvas -->
</EChartsAreaChart>

<EChartsAreaChart renderer="svg" {data} config={chartConfig}>
	<!-- SVG renderer -->
</EChartsAreaChart>

Steps
0

Install ECharts

Apache ECharts powers the provider and is required by every ECharts component.

Learn more at the ECharts import guide .

npm install echarts
0

Setup shadcn-svelte

Initialize shadcn-svelte to set up Tailwind CSS, theming, and component structure. Skip this step if you already have it.

Check out the shadcn-svelte installation docs for more details.

npx shadcn-svelte@latest add init
0

Add EvilCharts ECharts Components

Add components with the CLI. ECharts components are prefixed with echarts- — replace {chart-name} with one of area-chart, line-chart, bar-chart, composed-chart, radar-chart, pie-chart, radial-chart, or sankey-chart. Installing one pulls that chart plus the shared ui modules it imports.

npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/echarts-{chart-name}.json
Was this page helpful?