For the complete documentation index, see 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.
0
Sponsor

Introduction

Next

Ownable Apache ECharts components delivered through a shadcn registry.

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

  • 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?

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

  1. Configure the registry.
  2. Browse the chart components.
  3. Install a chart and edit the generated source in your own project.
$ pnpm dlx shadcn@latest add @chartcn/area-chart

Design lineage

The registry structure, public composition model, and example catalog are based on EvilCharts. The rendering implementation is original and uses Apache ECharts throughout—there is no Recharts runtime dependency.