# antuikit / ECharts Custom

> 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-custom

## Install

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

## Import

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

## Demos

- [Variable-width bars](https://ui.antuikit.com/embed/echarts-custom/profit.md): A `renderItem` that returns a `rect` spanning two x values, so each bar is as wide as its price band and as tall as its profit.
- [Histogram](https://ui.antuikit.com/embed/echarts-custom/histogram.md): Bins a scatter plot's x and y values and draws each bin as a `rect` from `renderItem`, one histogram above the plot and one beside it.
- [Error bars](https://ui.antuikit.com/embed/echarts-custom/error-bar.md): A `custom` series draws a whiskered `line` group over each bar, from the low to the high value, with `dataZoom` to scroll the batches.
- [Error scatter](https://ui.antuikit.com/embed/echarts-custom/error-scatter.md): A `custom` series draws a range on both axes around every scatter point, reading the bounds through `encode` with three columns per axis.
- [Polygon](https://ui.antuikit.com/embed/echarts-custom/polygon.md): One `polygon` through every data point, drawn on the first item through `params.context`, that reshapes as you zoom with `dataZoom`.
- [Bar trend](https://ui.antuikit.com/embed/echarts-custom/bar-trend.md): A `polyline` from `renderItem` runs over each group of bars, placed with `api.barLayout` so it meets the top of every year's bar.
- [Hexagonal binning](https://ui.antuikit.com/embed/echarts-custom/hexbin.md): Shots grouped into hexagons on a `geo` court, sized by attempts and colored by success rate through `visualMap`.
- [Profile](https://ui.antuikit.com/embed/echarts-custom/profile.md): Timed blocks on three tracks, each a `rect` cut to the plot with `clipRectByRect`, so they stay inside the grid while you zoom.
- [Cycle plot](https://ui.antuikit.com/embed/echarts-custom/cycle-plot.md): Two `custom` series per month: a `polyline` through eleven years of sales and a flat `line` at the month's average.
- [Polar heatmap](https://ui.antuikit.com/embed/echarts-custom/polar-heatmap.md): A `sector` per day and hour on a `polar` coordinate system, colored by commit count through `visualMap`.
- [Calendar icons](https://ui.antuikit.com/embed/echarts-custom/calendar-icons.md): A `custom` series on a `calendar` places one to four `path` icons and the day number in each cell of the month.
- [Flame graph](https://ui.antuikit.com/embed/echarts-custom/flame-graph.md): Stack frames drawn as `rect` blocks with truncated `textContent` labels, where clicking a frame zooms into it and Reset shows the whole trace.
- [Gantt chart](https://ui.antuikit.com/embed/echarts-custom/gantt.md): Flights on parking stands as `rect` bars with tag-shaped labels from a second `custom` series, and a drag mode that moves a flight to a free slot.
- [Wind barbs](https://ui.antuikit.com/embed/echarts-custom/wind-barb.md): Arrows from `renderItem` rotate to the wind direction over a wave height area, with a forecast `image` and temperature for each day.
- [Map ripples](https://ui.antuikit.com/embed/echarts-custom/geo-ripple.md): Pins on an SVG `geo` map, each with five rings in a staggered `keyframeAnimation` and a pin that bounces on its own loop.
- [Custom gauge](https://ui.antuikit.com/embed/echarts-custom/gauge.md): A ring and pointer cut from one gradient with `clipPath`, animated through `extra` and `during` as the value changes every few seconds.
- [Pie to seats](https://ui.antuikit.com/embed/echarts-custom/parliament.md): Switch between a pie and a seat chart drawn by `renderItem`, and `universalTransition` morphs each slice into its seats.
- [Spiral race](https://ui.antuikit.com/embed/echarts-custom/spiral-race.md): Spiral bars on a `polar` system grow through `extra` and `during` transitions, with a label counting rounds as each racer advances.
- [Circle packing](https://ui.antuikit.com/embed/echarts-custom/circle-packing.md): Nested circles laid out once per render inside `renderItem`, where clicking a circle zooms into it and the background zooms out.

## 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-*)`.