# Introduction

Ownable Apache ECharts components delivered through a shadcn registry.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



**chartcn** is a copy-and-paste chart registry for React. It keeps the composable API and visual range of EvilCharts, while replacing Recharts with a direct, tree-shaken Apache ECharts runtime.

## What you get [#what-you-get]

* **Eight chart families** — area, line, bar, composed, pie, radial, radar, and Sankey
* **111 focused examples** — gradients, patterns, stacking, glow, labels, legends, loading states, backgrounds, brushes, and more
* **Four showcase blocks** — monospace, hover-trace, grid, and isometric bar charts
* **ECharts-native lifecycle** — initialization, option updates, responsive resize, event binding, and disposal
* **Copy-and-paste ownership** — install source into your app with the shadcn CLI
* **Theme-aware colors** — define separate light and dark palettes in a small `ChartConfig`

## Why ECharts? [#why-echarts]

ECharts provides a declarative option model, Canvas and SVG renderers, built-in data zoom, accessibility metadata, rich interaction, and chart types such as Sankey and gauge without layering multiple rendering systems.

chartcn imports from `echarts/core`, registers only the chart families and components used by the registry, and uses the SVG renderer by default. The shared runtime observes its container with `ResizeObserver` and disposes every instance during React cleanup.

## Start here [#start-here]

1. [Configure the registry](/docs/installation).
2. [Browse the chart components](/docs/components).
3. Install a chart and edit the generated source in your own project.

```bash
npx shadcn@latest add @chartcn/area-chart
```

## Design lineage [#design-lineage]

The registry structure, public composition model, and example catalog are based on [EvilCharts](https://github.com/legions-developer/evilcharts/tree/main/src/registry). The rendering implementation is original and uses Apache ECharts throughout—there is no Recharts runtime dependency.