# antuikit / TanStack Bar

> TanStack Charts' SVG chart with its tooltip, painted with the theme's chart colors, grid and axes, with labels sized from the theme.

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

## Install

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

## Import

import { chartColors, RendererChart, seriesTooltip } from "@/components/ui/tanstack-chart";

## Demos

- [Basic](https://ui.antuikit.com/embed/tanstack-bar/basic.md): Pass `barY` the rows and the `x` and `y` fields to draw one bar per month, with rounded tops from `radius`.
- [Multiple series](https://ui.antuikit.com/embed/tanstack-bar/multiple.md): Set `z` and `color` to a series field and `layout` to `group()` to place each month's series side by side.
- [Stacked](https://ui.antuikit.com/embed/tanstack-bar/stacked.md): Set `layout` to `stack()` to pile the series into one bar per month, rounding only the end of the top segment.
- [Horizontal](https://ui.antuikit.com/embed/tanstack-bar/horizontal.md): Use `barX` with the band scale on `y` to lay the bars out sideways, with the category labels on the left.
- [Value labels](https://ui.antuikit.com/embed/tanstack-bar/label.md): Add a `text` mark on the same `x` and `y` and lift it with `dy` to print each bar's value above it.
- [Labels inside bars](https://ui.antuikit.com/embed/tanstack-bar/label-inside.md): Anchor one `text` mark at zero for the name inside the bar and another at the bar's end for its value.
- [Colored by category](https://ui.antuikit.com/embed/tanstack-bar/by-category.md): Set `color` to the category field to give every bar its own color from the theme palette.
- [Highlighted bar](https://ui.antuikit.com/embed/tanstack-bar/highlighted.md): Pass functions to `fill`, `stroke` and `strokeDasharray` to draw one bar with a dashed outline and a lighter fill.
- [Negative values](https://ui.antuikit.com/embed/tanstack-bar/negative.md): Return a color from `fill` by sign to paint gains and losses, with labels above or below each bar through `dy`.
- [Series toggle](https://ui.antuikit.com/embed/tanstack-bar/series-toggle.md): Rebuild the definition when a `Segmented` changes, to switch three months of daily bars between desktop and mobile.
- [Sorted](https://ui.antuikit.com/embed/tanstack-bar/sorted.md): Pass rows already sorted by value to keep the band scale in that order, with the most frequent letter first.
- [Grouped counts](https://ui.antuikit.com/embed/tanstack-bar/grouped.md): Count fetched rows with `groupBy`, then place female and male counts side by side with `group()` for each species.
- [Stacked over time](https://ui.antuikit.com/embed/tanstack-bar/stacked-over-time.md): Unpivot three cause columns with `fold`, then `stack()` them on a time scale to show monthly totals by cause.
- [Horizontal ranking](https://ui.antuikit.com/embed/tanstack-bar/horizontal-ranking.md): Sort the rows and draw them with `barX` to rank metro areas by population while keeping long labels readable.
- [Mean by group](https://ui.antuikit.com/embed/tanstack-bar/mean-by-group.md): Reduce raw rows to one mean per species with `groupBy` and a `mean` output, then label each bar with its value.
- [Stacked and grouped](https://ui.antuikit.com/embed/tanstack-bar/stacked-and-grouped.md): Give `group()` two slots and use `y1` and `y2` to stack two measures in one slot beside a third bar each day.
- [Pyramid](https://ui.antuikit.com/embed/tanstack-bar/pyramid.md): Negate one group and pass `stack({ offset: "diverging" })` to grow the two sides away from a shared zero line.
- [Lollipop](https://ui.antuikit.com/embed/tanstack-bar/lollipop.md): Combine a `link` stem from zero with a `dot` at the value to draw a lighter bar chart that marks each endpoint.
- [Dumbbell](https://ui.antuikit.com/embed/tanstack-bar/dumbbell.md): Join two `dot` marks with a `link` on each row to compare a 1980 value with its 2015 value for every city.
- [Waterfall](https://ui.antuikit.com/embed/tanstack-bar/waterfall.md): Turn yearly prices into changes with `rollingWindow`, then let `waterfall` stack them into floating bars and a net total.
- [Funnel](https://ui.antuikit.com/embed/tanstack-bar/funnel.md): Draw each stage as an `areaX` band from its own width to the next stage's width, with a label beside the funnel.
- [Active bar](https://ui.antuikit.com/embed/tanstack-bar/active-bar.md): Use `states` to dim the other bars on focus and a `crosshair` band to ring the active one, switching between iOS and Android from a `Segmented`.

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