# antuikit / TanStack Line

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

## 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-line/basic.md): Pass `lineY` the rows and the `x` and `y` fields to draw one series as a line, smoothed with a natural curve.
- [Linear](https://ui.antuikit.com/embed/tanstack-line/linear.md): Set `curve` to `curveLinear` to join the points with straight segments, so each change between months reads as a sharp turn.
- [Step](https://ui.antuikit.com/embed/tanstack-line/step.md): Set `curve` to `curveStep` for a value that holds until the next point, like a price list or a monthly plan.
- [Multiple](https://ui.antuikit.com/embed/tanstack-line/multiple.md): Set `z` and `color` to a series field to draw one line per series, with a row of `Badge` dots naming each one.
- [Dots](https://ui.antuikit.com/embed/tanstack-line/dots.md): Add a `dot` mark over the same rows to mark every data point on the line, wrapped in `decorative` to keep the tooltip clean.
- [Colored dots](https://ui.antuikit.com/embed/tanstack-line/dots-colors.md): Set `color` on the `dot` mark to a category field so each point takes its own palette color while the line stays one color.
- [Custom dots](https://ui.antuikit.com/embed/tanstack-line/dots-custom.md): Stack a `text` mark and a hollow `dot` filled with the surface color to draw a custom marker at each point.
- [Labels](https://ui.antuikit.com/embed/tanstack-line/label.md): Add a `text` mark with a negative `dy` to print each value just above its point on the line.
- [Custom labels](https://ui.antuikit.com/embed/tanstack-line/label-custom.md): Point the `text` mark's `text` at a category field to name each point instead of printing its value.
- [Slopegraph](https://ui.antuikit.com/embed/tanstack-line/slopegraph.md): Use `fold` to turn two year columns into rows and a point `x` scale to compare each metro's start and end values.
- [Series switch](https://ui.antuikit.com/embed/tanstack-line/interactive.md): Rebuild the definition when a `Segmented` changes to swap the plotted series, with a spring `motion` renderer animating the change.
- [Missing values](https://ui.antuikit.com/embed/tanstack-line/gaps.md): Return `null` from the `y` accessor to break the line where data is missing, here every January to March.
- [End labels](https://ui.antuikit.com/embed/tanstack-line/end-labels.md): Use `select` to pick each series' latest row and a `text` mark to name the line where it ends, instead of a legend.
- [Moving average](https://ui.antuikit.com/embed/tanstack-line/moving-average.md): Smooth daily highs and lows with `rollingWindow` into 14-day means, with a dashed `ruleY` marking the freezing point.
- [Indexed](https://ui.antuikit.com/embed/tanstack-line/indexed.md): Use `normalize` with `basis: "first"` to plot each series as a change from its first value, so different sizes compare fairly.
- [Bump chart](https://ui.antuikit.com/embed/tanstack-line/bump.md): Use `rank` to turn values into positions per year and `curveBumpX` to draw how each series moves up and down the ranking.
- [Difference](https://ui.antuikit.com/embed/tanstack-line/difference.md): Use `differenceY` to shade where the price runs above or below its moving average, with exact crossings between points.
- [Highs and lows](https://ui.antuikit.com/embed/tanstack-line/extrema.md): Use `select` with `min` and `max` to find the extreme rows, then mark and label them with `dot` and `text` marks.
- [Change arrows](https://ui.antuikit.com/embed/tanstack-line/change-arrows.md): Draw an `arrow` from each row's before values to its after values, colored by whether the change went up or down.
- [KPI sparklines](https://ui.antuikit.com/embed/tanstack-line/kpi-sparklines.md): Turn off `guides`, the tooltip and pointer focus to draw small trend lines and gradient areas under each metric card.

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