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:

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

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

## Steps


  
    ### Install ECharts
    
      

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

Learn more at the [ECharts import guide](https://echarts.apache.org/handbook/en/basics/import).


      ### npm

```bash
npm install echarts
```

### yarn

```bash
yarn add echarts
```

### bun

```bash
bun add echarts
```

### pnpm

```bash
pnpm add echarts
```
    

  

  
    ### 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](https://www.shadcn-svelte.com/docs/installation) for more details.


      ### npm

```bash
npx shadcn-svelte@latest add init
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add init
```

### bun

```bash
bunx --bun shadcn-svelte@latest add init
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add init
```
    

  

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


      ### npm

```bash
npx shadcn-svelte@latest add @evilcharts/echarts-{chart-name}
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/echarts-{chart-name}
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/echarts-{chart-name}
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/echarts-{chart-name}
```