# antuikit / TanStack Heatmaps

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

## Install

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

## Import

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

## Demos

- [Labeled cells](https://ui.antuikit.com/embed/tanstack-heatmaps/labeled.md): Pair `cell` with a `text` mark on the same band scales to color every episode by rating and print the rating inside its square.
- [Binned grid](https://ui.antuikit.com/embed/tanstack-heatmaps/binned.md): Run `binXY` with fixed thresholds and draw the bins with `rect`, so color shows how many penguins share each bill size.
- [Calendar](https://ui.antuikit.com/embed/tanstack-heatmaps/calendar.md): Map `x` to the week number and `y` to the weekday so `cell` lays daily values out like a calendar page.
- [Activity calendar](https://ui.antuikit.com/embed/tanstack-heatmaps/token-usage.md): Total events per day with `binTimeX` and color each day by usage level through an ordinal scale, one column per week.
- [Hexbin](https://ui.antuikit.com/embed/tanstack-heatmaps/hexbin.md): Use `hexbin` to group points into hexagons of a fixed width, colored by count through threshold steps.
- [Density contours](https://ui.antuikit.com/embed/tanstack-heatmaps/density.md): Pass `densityContour` the points and a list of `thresholds` to outline where the measurements cluster most.
- [Filled contours](https://ui.antuikit.com/embed/tanstack-heatmaps/contour.md): Give `contour` a grid of values with its `width` and `height` to fill nested bands of wind speed.
- [Vector field](https://ui.antuikit.com/embed/tanstack-heatmaps/vector-field.md): Set `length` and `rotate` on `vector` to draw an arrow per position that shows wind speed and direction.
- [Delaunay network](https://ui.antuikit.com/embed/tanstack-heatmaps/delaunay.md): Draw `delaunayLink` under the dots to connect every point to its nearest neighbors with a triangulated mesh.

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