# antuikit / ECharts Financial

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

## Install

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

## Import

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

## Demos

- [Candlestick](https://ui.antuikit.com/embed/echarts-financial/basic-candlestick.md): A `candlestick` series reads open, close, low and high for each day, painting rising days and falling days apart.
- [Boxplot](https://ui.antuikit.com/embed/echarts-financial/boxplot-transform.md): A `boxplot` dataset `transform` turns raw measurements into quartiles and a second result of outliers drawn as `scatter`.
- [Horizontal boxplot](https://ui.antuikit.com/embed/echarts-financial/horizontal-boxplot.md): The same `boxplot` transform laid out along a category `yAxis`, with `itemNameFormatter` as a function that names each run.
- [Midday break](https://ui.antuikit.com/embed/echarts-financial/lunch-break.md): An axis `breaks` entry removes the lunch hours from a single trading day, labeled once with the break's start and end.
- [Grouped boxplots](https://ui.antuikit.com/embed/echarts-financial/grouped-boxplots.md): Three `boxplot` series side by side in each category, each fed by its own transformed dataset, with `dataZoom` to scroll.
- [OHLC bars](https://ui.antuikit.com/embed/echarts-financial/ohlc-bars.md): A `custom` series with a `renderItem` function draws open and close ticks on a high-low line, over twelve years of daily data.
- [Marks and averages](https://ui.antuikit.com/embed/echarts-financial/mark-points.md): A `candlestick` series with `markPoint` for the high, low and average, `markLine` from low to high, and moving averages.
- [Brush to zoom](https://ui.antuikit.com/embed/echarts-financial/moving-averages.md): A year of daily candles with four moving average lines and a slider `dataZoom` whose `brushSelect` lets you drag a range.
- [Market hours only](https://ui.antuikit.com/embed/echarts-financial/market-hours.md): A `time` axis with `breaks` that skip each overnight close, so four trading days of minute data sit next to each other.
- [Linked volume](https://ui.antuikit.com/embed/echarts-financial/linked-volume.md): Candles and volume in two grids share one `axisPointer` with a drag `handle`, and moving average values follow the pointer.
- [Brush selection](https://ui.antuikit.com/embed/echarts-financial/brush-selection.md): A `brush` linked across price and volume grids fades the days outside the selection, starting with a range already selected.
- [200,000 bars](https://ui.antuikit.com/embed/echarts-financial/large-candlestick.md): A `candlestick` series over a dataset of 200,000 minutes, with volume bars colored up or down by a piecewise `visualMap`.
- [Aggregated boxplot](https://ui.antuikit.com/embed/echarts-financial/income-by-country.md): A `filter` and a `sort` dataset `transform` around per-country quartiles draw a `boxplot` of income, with yearly points beside.

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