Line charts are drawn with TanStack Charts, through the kit's Chart components. They paint the chart with the theme's colors, grid and type, and add three palette props. The chart itself is a TanStack definition, written the way TanStack documents it.
Install
npx antuikit@latest init
npx antuikit@latest add tanstack-chart
The first command installs AntuikitProvider and the theme tokens. The second adds the chart components and TanStack Charts itself.
Your first line chart
Describe the chart with defineChart, outside the component, and pass it to Chart. A line is a lineY mark: x names the position field and y the value field.
import { defineChart, lineY } from "@tanstack/charts"
import { scaleLinear } from "@tanstack/charts/scales/linear"
import { scalePoint } from "@tanstack/charts/scales/point"
import { tooltip } from "@tanstack/charts/tooltip"
import { Chart, chartColors, seriesTooltip } from "@/components/ui/tanstack-chart"
Give each point a key that is unique across series, or points in the same month share an identity.
color: { domain } fixes which series gets which color, so the colors stay put when a series is missing. sort: "color-domain" lists the tooltip rows in that order.
focus: "group-x" focuses a whole month, so the tooltip lists every series at that point.
Curve
Lines join their points with straight segments. For another shape, pass a D3 curve through d3Curve. Add d3-shape to your project to import the curves.
import { d3Curve } from "@tanstack/charts"
import { curveMonotoneX, curveStep } from "d3-shape"
curveMonotoneX smooths the line without passing above the highest point or below the lowest. Prefer it over curveNatural, which can overshoot.
curveStep holds each value until the next point, for prices and plans.
A curve only changes the path between points. It does not smooth the data: compute a moving average for that.
Missing data
A row whose y is null, missing or not a number breaks the line, and the next valid row starts a new segment in the same series. Return null from an accessor for the points you want to leave out.
lineY(rows, {
x: "Date",
// A null value breaks the line, here for every January to March.
Rows are drawn in the order you pass them. Sort them by x before you build the mark.
Markers
points: true draws a small dot on every point. For larger or custom markers, add a dot mark over the same rows and wrap it in decorative, so the tooltip lists each point once.
import { defineChart, dot, lineY } from "@tanstack/charts"
import { decorative } from "@tanstack/charts/mark/decorative"
For dates, pass Date values and a time scale. A point scale spaces the rows evenly, so a missing week takes no room. A time scale spaces them by elapsed time and picks calendar ticks. Add d3-scale to your project for scaleUtc.
title: (points[0]?.xValue as Date).toLocaleDateString("en-US"),
}),
},
},
)
seriesTooltip prints the x value as text. Override its title to format a date.
Labels at the end
To name each line where it ends instead of in a legend, pick each series' last row with select and draw it with a text mark. Leave room on the right with margin.
import { defineChart, lineY, select, text } from "@tanstack/charts"
The chart takes the theme's chart colors without any setup. Change the palette on the chart itself, or paint one mark with fill and chartColors. The Color guideline covers which palette fits which data.
Taken by Chart, RendererChart and CanvasChart. Rows marked antuikit in the Version column are added by the kit.
Animation
Use RendererChart with TanStack's motion() renderer to animate marks in and between data updates. It skips the animation when the reader has asked for reduced motion.
import { motion } from "@tanstack/charts/motion"
import { RendererChart } from "@/components/ui/tanstack-chart"