Documentation

Introduction Get Started Theming Tokens Roadmap Changelog llms.txt

Components

Charts

X AI

Kiosk

Area

Area charts fill the space under a line, to show how a total changes over time or how series stack up into it.

Code

Area 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 area chart

Describe the chart with defineChart, outside the component, and pass it to Chart. An area is an areaY mark: x names the position field and y the value field. Give it a stroke so the top edge reads as a line.

import { areaY, d3Curve, defineChart } from "@tanstack/charts"

import { scaleLinear } from "@tanstack/charts/scales/linear"

import { scalePoint } from "@tanstack/charts/scales/point"

import { tooltip } from "@tanstack/charts/tooltip"

import { curveNatural } from "d3-shape"

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

const signups = [

{ month: "January", signups: 412 },

{ month: "February", signups: 538 },

{ month: "March", signups: 486 },

{ month: "April", signups: 391 },

]

const definition = defineChart(

{

marks: [

areaY(signups, {

id: "Signups",

x: "month",

y: "signups",

curve: d3Curve(curveNatural),

fill: chartColors.series[0],

fillOpacity: 0.4,

stroke: chartColors.series[0],

strokeWidth: 1.5,

}),

scales: {

x: { scale: scalePoint },

y: { scale: scaleLinear, grid: true },

{ focus: "group-x", tooltip: { use: tooltip, content: seriesTooltip } },

)

export function SignupsChart() {

return (

<Chart

definition={definition}

ariaLabel="Newsletter signups by month"

height={200}

)

}

The chart fills its container's width, so give it a height. ariaLabel is required.

Which component

All three take the same definition and the same palette props.

Chart components

Baseline and bands

An area fills down to zero. Keep zero in the value scale: if you set a domain yourself, start it at 0, or the filled area no longer matches the amount. To fill between two values, such as a low and a high, pass the edges with y1 and y2.

// A fixed domain that keeps the baseline.

y: { scale: scaleLinear().domain([0, 30]), grid: true }

// A band between two fields.

areaY(rows, { x: "date", y1: "low", y2: "high" })

Stacking

Put every series in one array and name the series field with z and color. Areas that share an x stack on their own. Pass layout: stack() to set which series sits at the bottom, or to stack to 100%.

import { areaY, defineChart, stack } from "@tanstack/charts"

const definition = defineChart(

{

marks: [

areaY(revenue, {

x: "month",

y: "revenue",

z: "channel",

color: "channel",

layout: stack({ order: ["In store", "Online"] }),

fillOpacity: 0.4,

}),

scales: { x: { scale: scalePoint }, y: { scale: scaleLinear, grid: true } },

color: { domain: ["Online", "In store"] },

{

focus: "group-x",

tooltip: { use: tooltip, sort: "color-domain", content: seriesTooltip },

)

order lists the series from the bottom up.
color: { domain } fixes which series gets which color. sort: "color-domain" lists the tooltip rows in that order.
stack({ offset: "normalize" }) stacks the series as shares of each point's total.
Setting y1 or y2 turns stacking off, so overlapping bands keep the edges you gave them.

Curve

Areas join their points with straight lines. 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, curveNatural, curveStep } from "d3-shape"

areaY(rows, { x: "month", y: "spend", curve: d3Curve(curveStep) })

curveMonotoneX smooths the edge without passing above the highest point or below the lowest.
curveNatural is smoother but can overshoot between points.
curveStep holds each value until the next point, for prices and plans.

Missing data

A row whose y is null, missing or not a number breaks the area, and the next valid row starts a new piece. Return null from an accessor for the points you want to leave out. Rows are drawn in the order you pass them, so sort them by x first.

areaY(rows, {

x: "date",

y: (row) => (row.reported ? row.value : null),

})

Gradient fill

Declare gradients on the definition and point fill at one with url(#id). A fill that fades toward the baseline keeps the top edge strong.

defineChart({

marks: [

areaY(rows, { x: "date", y: "readers", fill: "url(#readers-fill)", fillOpacity: 1 }),

gradients: [

{

id: "readers-fill",

x1: 0,

y1: 0,

x2: 0,

y2: 1,

stops: [

{ offset: 0, color: chartColors.series[0], opacity: 0.34 },

{ offset: 1, color: chartColors.series[0], opacity: 0.015 },

// ...scales

})

Top edge

stroke on areaY outlines the whole area. For a line on the top edge only, add a lineY with the same x, y and curve after the area, and wrap one of the two in decorative from @tanstack/charts/mark/decorative so the tooltip lists each point once.

Colors

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.

// One series in a fixed color.

areaY(signups, {

x: "month",

y: "signups",

fill: chartColors.series[0],

stroke: chartColors.series[0],

})

Palette props

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"

const renderer = motion({ initial: "always" })