# antuikit / TanStack Tooltip

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

## Install

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

## Import

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

## Demos

- [Default](https://ui.antuikit.com/embed/tanstack-tooltip/default.md): Pass `seriesTooltip` as the tooltip `content` to show the day as the title and one row per activity with its color dot.
- [Line indicator](https://ui.antuikit.com/embed/tanstack-tooltip/indicator-line.md): Use `renderTooltipBody` to draw your own rows, here with a thin colored bar in place of each activity's dot.
- [No indicator](https://ui.antuikit.com/embed/tanstack-tooltip/indicator-none.md): Leave `color` off the rows your `content` returns to list each activity and its value without a colored dot.
- [Custom label](https://ui.antuikit.com/embed/tanstack-tooltip/label-custom.md): Return a fixed `title` from `content`, like Activities, to name what the rows describe instead of the hovered day.
- [Label formatter](https://ui.antuikit.com/embed/tanstack-tooltip/label-formatter.md): Format the `title` your `content` returns, here turning the hovered date into a full month, day and year.
- [No label](https://ui.antuikit.com/embed/tanstack-tooltip/label-none.md): Leave `title` out of what `content` returns to show only the activity rows, each with its color dot.
- [Formatter](https://ui.antuikit.com/embed/tanstack-tooltip/formatter.md): Format each row's `value` in `content`, here adding a kcal unit, and drop the title and dots for a compact list.
- [Icons](https://ui.antuikit.com/embed/tanstack-tooltip/icons.md): Return an `Icon` per row from `renderTooltipBody`, colored like its series, and repeat the icons in the legend.
- [Total row](https://ui.antuikit.com/embed/tanstack-tooltip/advanced.md): Append a row to what `content` returns to add a total under the activities, with every value in kcal.
- [Nearest point](https://ui.antuikit.com/embed/tanstack-tooltip/pointer.md): Set `anchor` to `point` and list `items` per channel to pin the tooltip to the closest closing price and grow its dot.
- [Grouped](https://ui.antuikit.com/embed/tanstack-tooltip/grouped.md): Set `focus` to `group-x` and pass a `portal` to list every industry for the hovered month, with a band behind it.
- [Voronoi cells](https://ui.antuikit.com/embed/tanstack-tooltip/voronoi.md): Add a `voronoi` mark so the pointer always lands on the nearest car, and name it with a single derived tooltip item.
- [Pinned details](https://ui.antuikit.com/embed/tanstack-tooltip/pinned.md): Read `pinned` in `renderTooltipBody` to expand a clicked month into a usage breakdown with a small chart inside the tooltip.

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