# antuikit / Recharts Bar

> A responsive frame for one Recharts chart that paints its grid, axes, cursor and labels with the theme's chart colors and exposes each series color as `var(--series-<key>)`.

Docs: https://antuikit.com/docs/components/recharts-bar

## Install

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

## Import

import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/recharts-chart";

## Demos

- [Basic](https://ui.antuikit.com/embed/recharts-bar/basic.md): Put a `BarChart` inside `ChartContainer` and give each `Bar` a `radius` to round the top corners of the columns.
- [Stacked](https://ui.antuikit.com/embed/recharts-bar/stacked.md): Give two bars the same `stackId` to pile them into one column, with `background` drawing the empty track behind each.
- [Tiny](https://ui.antuikit.com/embed/recharts-bar/tiny.md): A `BarChart` with no axes, grid or tooltip, sized as a sparkline under a weekly sales figure.
- [Bar background](https://ui.antuikit.com/embed/recharts-bar/background.md): Set `background` on one `Bar` to draw a track behind each of its columns, so the remaining space reads at a glance.
- [Two value axes](https://ui.antuikit.com/embed/recharts-bar/biaxial.md): Give each `YAxis` a `yAxisId` and point each `Bar` at one, so orders and revenue each get their own scale.
- [Positive and negative](https://ui.antuikit.com/embed/recharts-bar/positive-negative.md): Bars grow up or down from a `ReferenceLine` at zero, and a custom `tick` colors each axis value by its sign.
- [Stacked by sign](https://ui.antuikit.com/embed/recharts-bar/stacked-by-sign.md): Set `stackOffset="sign"` so positive values stack above zero and negative values stack below it, in one column.
- [Minimum bar height](https://ui.antuikit.com/embed/recharts-bar/min-height.md): Set `minPointSize` so very small values still draw a visible bar, with a custom `LabelList` badge above each column.
- [Ranged bars](https://ui.antuikit.com/embed/recharts-bar/range.md): Pass a `[low, high]` pair as the value and each `Bar` spans from one to the other, like a day's lowest and highest temperature.
- [Ranged stack](https://ui.antuikit.com/embed/recharts-bar/ranged-stacked.md): Wrap ranged bars in `BarStack` to place each phase at its own start and end, with `radius` rounding the whole stack.
- [Axis labels](https://ui.antuikit.com/embed/recharts-bar/axis-labels.md): Put a `Label` inside `XAxis` or pass `label` to `YAxis` to name each axis, and add a `LabelList` to tag every bar.
- [Label lists](https://ui.antuikit.com/embed/recharts-bar/label-list.md): Add a `LabelList` to each `Bar`: one writes page names inside the columns at an angle, the other prints values on top.
- [Label background](https://ui.antuikit.com/embed/recharts-bar/label-background.md): Pass a `content` component to `LabelList` that draws a rounded pill behind each value, so it stays readable over the bar.
- [Threshold line](https://ui.antuikit.com/embed/recharts-bar/threshold.md): A `ReferenceLine` marks the budget across a stacked chart, and a `LabelList` with `valueAccessor` prints each week's total.
- [Legend highlight](https://ui.antuikit.com/embed/recharts-bar/legend-highlight.md): Handle `onMouseEnter` and `onClick` on `ChartLegend` to fade the other series, and click a name to keep it highlighted.
- [Brush](https://ui.antuikit.com/embed/recharts-bar/brush.md): Add a `Brush` under the chart and drag its handles to zoom into a range of days, with the legend placed on top.
- [Two category axes](https://ui.antuikit.com/embed/recharts-bar/multi-x-axis.md): A second `XAxis` with its own `xAxisId` and a custom `tick` groups the months into quarters under the main axis.
- [Population pyramid](https://ui.antuikit.com/embed/recharts-bar/population-pyramid.md): A horizontal `BarChart` with `stackOffset="sign"` puts male shares left of the axis and female shares right of it.
- [Custom shape](https://ui.antuikit.com/embed/recharts-bar/custom-shape.md): Pass a `shape` component to draw each bar as a curved peak, colored by its position, with a matching `LabelList` on top.
- [Outlined bars](https://ui.antuikit.com/embed/recharts-bar/outlined-shape.md): A `shape` component draws each bar as an outline in its own color, with a thicker stroke on one and an SVG pattern on another.
- [Click to select](https://ui.antuikit.com/embed/recharts-bar/click-to-select.md): A `shape` component holds its own state and toggles the bar between faded and solid each time you click it.
- [Waterfall](https://ui.antuikit.com/embed/recharts-bar/waterfall.md): Ranged bars that start where the previous one ended show how gains and costs add up to profit, colored by a `shape`.
- [Candlestick](https://ui.antuikit.com/embed/recharts-bar/candlestick.md): A ranged `Bar` draws each candle's body and an `ErrorBar` its wick, colored up or down, with a custom tooltip of prices.
- [Box plot](https://ui.antuikit.com/embed/recharts-bar/box-plot.md): A ranged `Bar` with a custom `shape` draws quartiles and the median, `ErrorBar` adds whiskers and a `Scatter` the outliers.
- [Animated bar width](https://ui.antuikit.com/embed/recharts-bar/animated-width.md): One `shape` used as `activeBar` too keeps every bar mounted, so a CSS transition widens the bar under the pointer.
- [Streaming window](https://ui.antuikit.com/embed/recharts-bar/streaming.md): Slide a window over the data and compare `animationMatchBy` strategies, or swap in a swipe with `animationInterpolateFn`.
- [Animate on scroll](https://ui.antuikit.com/embed/recharts-bar/scroll-animate.md): An `AnimationControllerProvider` drives the bars' entry animation from the page's scroll position instead of a timer.

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