# antuikit / ECharts Dataset

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

## Install

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

## Import

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

## Demos

- [Rows of arrays](https://ui.antuikit.com/embed/echarts-dataset/array-source.md): Pass a table to `dataset.source` with a header row, and each bar series picks up the next column on its own, one series per year.
- [Rows of objects](https://ui.antuikit.com/embed/echarts-dataset/object-source.md): Give `dataset.source` an array of objects and list the keys in `dimensions`, which also sets the order the series read them in.
- [Rows or columns](https://ui.antuikit.com/embed/echarts-dataset/series-layout.md): Set `seriesLayoutBy` to `row` to read one series per product in the top chart, while the bottom chart reads one series per year.
- [Several pies, one table](https://ui.antuikit.com/embed/echarts-dataset/default-encode.md): Four pies share one `dataset`: the first takes the first column by default and the others pick a year with `encode.value`.
- [Encode](https://ui.antuikit.com/embed/echarts-dataset/encode.md): Map columns to axes with `encode`, products on the y axis and amounts on the x axis, and color each bar by its score with `visualMap`.
- [Shared dataset](https://ui.antuikit.com/embed/echarts-dataset/shared-dataset.md): A line chart and a pie read the same `dataset`, and the pie switches to the year under the pointer through `updateAxisPointer`.
- [Sort transform](https://ui.antuikit.com/embed/echarts-dataset/sort-transform.md): Add a `transform` of type `sort` as a second dataset and point the series at it with `datasetIndex`, so the bars run highest first.
- [Filter transform](https://ui.antuikit.com/embed/echarts-dataset/filter-transform.md): Split one table into a pie per year with `filter` transforms, and lay the pies out side by side or stacked with `media` queries.
- [Encode matrix](https://ui.antuikit.com/embed/echarts-dataset/encode-matrix.md): Four scatter plots in four grids read one `dataset`, each with its own `encode` pairing of income, life expectancy, population and country.

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