# antuikit / TanStack Interactive

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

## Install

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

## Import

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

## Demos

- [Toggle series](https://ui.antuikit.com/embed/tanstack-interactive/legend.md): Pass `interactiveColorLegend` a `controlledSignal` of visible series so clicking a legend entry hides or shows that line on a fixed scale.
- [Linked table](https://ui.antuikit.com/embed/tanstack-interactive/chart-table.md): Share one `keyedSelection` between the chart and a `Table`, so picking a point highlights its row and picking a row highlights its point.
- [Axis pointer](https://ui.antuikit.com/embed/tanstack-interactive/axis-pointer.md): Add `focusGuideX` with `focus` set to `group-x` to snap a dashed line to the nearest month and list every industry in one tooltip.
- [Synchronized cursors](https://ui.antuikit.com/embed/tanstack-interactive/synchronized-cursors.md): Stack two views with `viewGrid` and `share` their x scale, so one cursor tracks the same date in both years and fills the totals above.
- [Free cursor](https://ui.antuikit.com/embed/tanstack-interactive/free-cursor.md): Add `continuousCursor` to `controls` to follow any point in the plot without snapping to data, and steer it with two sliders.
- [Range brush](https://ui.antuikit.com/embed/tanstack-interactive/brush.md): Add `brushX` with snapping `values` to drag a range over monthly closes and show the selected months' average and change below the chart.
- [Zoom and pan](https://ui.antuikit.com/embed/tanstack-interactive/zoom.md): Add `zoomX` with an `extent` and `scaleExtent` to zoom the time axis with the wheel, drag to pan, and reset to the full range.
- [Focus and context](https://ui.antuikit.com/embed/tanstack-interactive/focus-context.md): Drag a `brushX` window on a small overview chart, or move a `Slider`, to choose the four months the large chart above shows.
- [Playback scrubber](https://ui.antuikit.com/embed/tanstack-interactive/playback.md): Add `handleX` on a track below the axis to scrub a playhead through trading days, or press Play to step through them on a timer.
- [Streaming window](https://ui.antuikit.com/embed/tanstack-interactive/streaming.md): Append daily samples while the x `domain` stays locked, follows the latest week, or widens to show every sample, chosen with a `Segmented`.
- [Scrollable lanes](https://ui.antuikit.com/embed/tanstack-interactive/resource-lanes.md): Draw tasks with `rect` on a wide chart inside a scrolling box, with lane names pinned beside it at the positions the band scale reports.
- [Editable event](https://ui.antuikit.com/embed/tanstack-interactive/editable-range.md): Ride a `handleX` on the release lane with `cross` so dragging it moves the event's end date day by day while its start stays put.

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