# antuikit / ECharts Graphic

> An ECharts chart painted with the theme's chart colors, axes, tooltip and type scale, in light and dark mode, compact mode and inside a `ThemeScope`. It resizes with its element.

Docs: https://antuikit.com/docs/components/echarts-graphic

## Install

npx antuikit@latest init
npx antuikit@latest add echarts-chart

## Import

import { chartColors, EChart, type EChartOption } from "@/components/ui/echarts-chart";

## Demos

- [Loading bars](https://ui.antuikit.com/embed/echarts-graphic/loading.md): A `group` of seven rects, each with a looping `keyframeAnimation` on `scaleY` and a growing `delay`, makes a custom loading indicator.
- [Stroke animation](https://ui.antuikit.com/embed/echarts-graphic/stroke-animation.md): A `text` element animates `lineDashOffset` and `lineDash` in its keyframes to trace its outline, then fills in before the loop restarts.
- [Wave](https://ui.antuikit.com/embed/echarts-graphic/wave.md): A grid of `circle` elements shrink and fade in a looping `keyframeAnimation`, each delayed by a smooth noise value so the motion rolls like a wave.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/echarts-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.