# antuikit / ECharts Bar

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

## Install

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

## Import

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

## Demos

- [Basic bar](https://ui.antuikit.com/embed/echarts-bar/basic.md): A `bar` series on a `category` x axis, one bar per weekday, with every other setting left at its default.
- [Ticks aligned with labels](https://ui.antuikit.com/embed/echarts-bar/tick-align.md): Set `axisTick.alignWithLabel` so each tick sits under its label, and `barWidth` to make the bars fill most of each band.
- [Bar background](https://ui.antuikit.com/embed/echarts-bar/background.md): Turn on `showBackground` to draw a full-height track behind each bar, so its value reads against the axis maximum.
- [Single bar style](https://ui.antuikit.com/embed/echarts-bar/single-bar-style.md): Give one data item its own `itemStyle` to call out a single bar, here the busiest day of the week.
- [Horizontal bars](https://ui.antuikit.com/embed/echarts-bar/horizontal.md): Put the `category` axis on `yAxis` and the value axis on `xAxis` for long labels, here world population for two years.
- [Stacked horizontal](https://ui.antuikit.com/embed/echarts-bar/stacked-horizontal.md): Stack five `bar` series on a horizontal axis with a `label` on each segment and `emphasis.focus` set to `series`.
- [Stacked and grouped](https://ui.antuikit.com/embed/echarts-bar/stacked.md): Bars that share a `stack` name pile up, the rest sit side by side, and a `markLine` joins the lowest and highest search bars.
- [Rounded stack tops](https://ui.antuikit.com/embed/echarts-bar/stack-border-radius.md): Set `itemStyle.borderRadius` per data item so only the top segment of each stack gets rounded corners, even when some are empty.
- [Labels beside negatives](https://ui.antuikit.com/embed/echarts-bar/negative-labels.md): Category names drawn as bar labels with `formatter`, moved to the right of each negative bar through a per-item `label`.
- [Negative values](https://ui.antuikit.com/embed/echarts-bar/negative-values.md): A stacked `bar` pair with negative expenses and positive income, with each `label.position` set to read away from zero.
- [Waterfall](https://ui.antuikit.com/embed/echarts-bar/waterfall.md): A transparent placeholder series stacked under the real one turns plain bars into a waterfall of monthly costs.
- [Accumulated waterfall](https://ui.antuikit.com/embed/echarts-bar/accumulated-waterfall.md): Income and expense series stacked on a transparent base, with a tooltip `formatter` that skips the placeholder.
- [Mark points and lines](https://ui.antuikit.com/embed/echarts-bar/rainfall.md): Each series shows its maximum and minimum with `markPoint` and its average with a `markLine`, for monthly rainfall and evaporation.
- [Bars with a line](https://ui.antuikit.com/embed/echarts-bar/mixed-line-bar.md): Two `bar` series share the left axis and a `line` series reads the right one through `yAxisIndex`, each with its own unit.
- [Multiple y axes](https://ui.antuikit.com/embed/echarts-bar/multiple-y-axes.md): Three value axes, two on the right with an `offset`, and `alignTicks` so their grid lines meet, each colored like its series.
- [Label rotation](https://ui.antuikit.com/embed/echarts-bar/label-rotation.md): Set `label.rotate` and `label.position` on grouped bars, with a slider for the angle and a select for where the label sits.
- [Normalized stack](https://ui.antuikit.com/embed/echarts-bar/normalized-stack.md): Divide each value by its day's total so a `stack` of bars always reaches 100 percent, labeled with each share.
- [Normalized with bands](https://ui.antuikit.com/embed/echarts-bar/normalized-variation.md): A 100 percent `stack` with a `custom` series drawing translucent bands between bars, so each share's change is easy to follow.
- [Gradient and click to zoom](https://ui.antuikit.com/embed/echarts-bar/gradient-zoom.md): Fill bars with a `LinearGradient`, label them inside the axis, and dispatch a `dataZoom` action on click to focus nearby days.
- [Animation delay](https://ui.antuikit.com/embed/echarts-bar/animation-delay.md): Stagger each bar's entrance with an `animationDelay` function and an `elasticOut` easing, one series slightly after the other.
- [Radial bars with labels](https://ui.antuikit.com/embed/echarts-bar/polar-radial-labels.md): A `bar` series on a `polar` grid with categories around the angle axis, and a control for where `label.position` puts each label.
- [Tangential bars with labels](https://ui.antuikit.com/embed/echarts-bar/polar-tangential-labels.md): Categories on the radius axis turn polar bars into arcs, with a control for where `label.position` puts each label.
- [Partial polar grids](https://ui.antuikit.com/embed/echarts-bar/polar-end-angle.md): Two `polar` grids, each limited to a quarter circle with `startAngle` and `endAngle`, sharing one chart.
- [Stacked arcs](https://ui.antuikit.com/embed/echarts-bar/polar-stack.md): Three `bar` series with one `stack` on a `polar` grid with categories on the radius axis, so they stack along each ring.
- [Stacked radial bars](https://ui.antuikit.com/embed/echarts-bar/polar-stack-radial.md): Three `bar` series with one `stack` on a `polar` grid with categories on the angle axis, so they stack outward.
- [Round caps](https://ui.antuikit.com/embed/echarts-bar/polar-round-cap.md): Set `roundCap` on a polar `bar` series to round both ends of each arc, next to a series without it.
- [Ranges on a polar grid](https://ui.antuikit.com/embed/echarts-bar/polar-range.md): Transparent `stack` placeholders float a range bar and a thin average marker per city around a `polar` grid.
- [Axis breaks](https://ui.antuikit.com/embed/echarts-bar/axis-breaks.md): Set `breaks` on the value axis to skip empty ranges between small and huge values, and click a break to expand it.
- [Brush to add a break](https://ui.antuikit.com/embed/echarts-bar/brush-axis-break.md): Drag across the chart to turn that value range into a new `breaks` entry, merged with any break it overlaps.
- [Brush selection](https://ui.antuikit.com/embed/echarts-bar/brush-select.md): Add a `brush` component with rectangle, polygon and axis-band tools to select bars across two stacks.
- [Drilldown](https://ui.antuikit.com/embed/echarts-bar/drilldown.md): Click a bar to replace it with its breakdown, morphing between levels with `universalTransition` and a matching `dataGroupId`.
- [Multi-level drilldown](https://ui.antuikit.com/embed/echarts-bar/multi-level-drilldown.md): Use `itemGroupId` and `itemChildGroupId` in `encode` to drill three levels deep, with a back button to climb out.
- [Bar race](https://ui.antuikit.com/embed/echarts-bar/race.md): Turn on `realtimeSort` with `valueAnimation` labels and update the data on a timer, so bars swap places as they grow.
- [Country race](https://ui.antuikit.com/embed/echarts-bar/country-race.md): A `realtimeSort` race over a `dataset` that steps through years, with flags in a `rich` axis label and the year drawn behind.
- [Live data](https://ui.antuikit.com/embed/echarts-bar/dynamic-data.md): A `bar` and a `line` series on two x axes, shifting one point off and pushing a new one on every couple of seconds.
- [Rich text labels](https://ui.antuikit.com/embed/echarts-bar/rich-text-labels.md): Axis labels with icons through `rich` styles with a background image, and `markPoint` labels built from several `rich` styles.
- [Large data](https://ui.antuikit.com/embed/echarts-bar/large-data.md): Set `large` on a `bar` series to draw half a million bars, with `dataZoom` to move through them.
- [Zoom on both axes](https://ui.antuikit.com/embed/echarts-bar/zoom-on-value.md): Two `dataZoom` sliders, one on the category axis and one on the value axis with `filterMode` set to `empty`, over a large budget.
- [Timeline](https://ui.antuikit.com/embed/echarts-bar/timeline-finance.md): A `timeline` plays through ten years of `options`, swapping the data of six bar series and a pie of industry shares.
- [Watermark](https://ui.antuikit.com/embed/echarts-bar/watermark.md): A `pattern` background tiles a watermark behind two bar grids and two pies laid out in one chart.

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