||

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={data} config={chartConfig}>
  {/* Canvas */}
</EChartsAreaChart>
 
<EChartsAreaChart renderer="svg" data={data} config={chartConfig}>
  {/* SVG renderer */}
</EChartsAreaChart>

Steps
1

Install ECharts

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

Learn more at the ECharts import guide.

npm install echarts
2

Setup shadcn/ui

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

Check out the shadcn/ui Next.js installation docs for more details.

npx shadcn@latest add init
3

Add EvilCharts ECharts Components

Add components with the CLI. ECharts components are prefixed with echarts- — replace {chart-name} with a chart type (e.g., area-chart, bar-chart, line-chart, pie-chart). Installing one pulls that chart plus the shared ui modules it imports, and nothing from Recharts.

npx shadcn@latest add @evilcharts/echarts-{chart-name}
Did you like the content?