Charts that feel alive.

Line charts

Monthly recurring revenue$145,650+10.9% from August

Monthly recurring revenue, in dollars
Month	MRR
October 2025	64400
November 2025	72550
December 2025	69350
January 2026	85250
February 2026	94950
March 2026	106250
April 2026	104400
May 2026	112000
June 2026	125200
July 2026	120450
August 2026	131350
September 2026	145650

Line

API latency

Hourly API response time percentiles, in milliseconds
Hour (UTC)	p50	p95	p99
00:00	41	118	262
01:00	39	112	248
02:00	38	109	241
03:00	38	111	255
04:00	40	116	260
05:00	42	124	281
06:00	47	138	302
07:00	53	152	331
08:00	58	168	356
09:00	61	177	372
10:00	63	181	384
11:00	62	179	377
12:00	60	174	369
13:00	64	186	402
14:00	71	214	518
15:00	66	193	428
16:00	62	178	381
17:00	59	169	362
18:00	55	158	339
19:00	51	147	318
20:00	48	139	301
21:00	46	131	287
22:00	44	125	274
23:00	42	120	266

Multiple lines

UptimeDaily uptime, last 14 days. The dashed line is the 99.9% target.

Met target
Missed target

Daily uptime and downtime
Date	Uptime	Downtime
Sep 29	100.00%	0 s
Sep 30	100.00%	0 s
Oct 1	99.98%	17 s
Oct 2	100.00%	0 s
Oct 3	99.95%	43 s
Oct 4	100.00%	0 s
Oct 5	100.00%	0 s
Oct 6	99.72%	4 min 2 s
Oct 7	99.99%	9 s
Oct 8	100.00%	0 s
Oct 9	99.86%	2 min 1 s
Oct 10	100.00%	0 s
Oct 11	100.00%	0 s
Oct 12	99.97%	26 s

Line with dots

New checkout rollout

Share of users with the new checkout
Date	Users	Note
Sep 14	1%	Staff only
Sep 16	5%	First customers
Sep 21	25%	Increased
Sep 23	10%	Rolled back for payment errors
Sep 28	25%	Fix released
Oct 2	50%	Increased
Oct 7	100%	All users
Oct 12	100%	Current

Step line

First reply time

Last 14 days
Previous 14 days

Median hours to the first reply
Date	Last 14 days	Previous 14 days
Sep 29	3.2	4.1
Sep 30	2.9	3.8
Oct 1	3.4	4.4
Oct 2	4.1	4.9
Oct 3	6.8	8.1
Oct 4	7.2	8.6
Oct 5	3.6	4.5
Oct 6	2.8	3.9
Oct 7	2.5	3.6
Oct 8	2.7	3.9
Oct 9	3.3	4.6
Oct 10	5.9	7.4
Oct 11	6.1	7.9
Oct 12	2.9	4

Interactive line

Install
Your data
Make it yours

CLI

Manual

Complete the one-time setup first.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-chart.json

Build the definition with TanStack Charts. Show it with Chart, in a ChartFrame.

traffic-chart.tsx

"use client";import { barY, defineChart } from "@tanstack/charts";import { scaleBand } from "@tanstack/charts/scales/band";import { scaleLinear } from "@tanstack/charts/scales/linear";import {  Chart,  ChartCaption,  ChartDescription,  ChartFrame,  ChartLegend,  ChartLegendItem,  ChartTable,  ChartTitle,} from "@/components/vip-ui/chart";const rows = [  { channel: "Direct", visits: 42 },  { channel: "Search", visits: 31 },];const definition = defineChart({  marks: [barY(rows, { x: "channel", y: "visits", key: "channel" })],  scales: {    x: { scale: scaleBand },    y: { scale: scaleLinear, grid: true },  },});<ChartFrame>  <ChartCaption>    <ChartTitle>Traffic sources</ChartTitle>    <ChartDescription>Visits in thousands</ChartDescription>  </ChartCaption>  <Chart definition={definition} height={220} ariaLabel="Visits by channel" />  <ChartLegend>    <ChartLegendItem color="var(--ts-chart-1)">Visits</ChartLegendItem>  </ChartLegend>  <ChartTable    caption="Visits by channel, in thousands"    columns={["Channel", "Visits"]}    rows={rows.map((row) => [row.channel, row.visits])}  /></ChartFrame>

ChartFrame
Sets the series colors and the tooltip styles.
- ChartCaptionOptional
  - ChartTitle
  - ChartValueOptional
  - ChartDescriptionOptional
- ChartActionOptional
  Shows beside the caption. Moves below it on narrow screens.
- Chart
  Owns the motion. Accepts the TanStack core Chart props.
  - ChartCenterOptional
    Covers the plot and centers its content, such as a donut total.
- ChartLegendOptional
  - ChartLegendItemRepeats
- ChartTable
  Screen readers only.

When a chart scrolls into view, it fades in. Its bar, line, area, and arc marks grow from their baseline.
A chart that the server renders on screen does not move when the page loads. A chart that mounts later, for example after a link, grows in.
When the data changes, each mark moves to its new value. Give each mark a stable key.

To change the motion of one chart, give it a renderer.

revenue-chart.tsx

import { motion } from "@tanstack/charts/motion";const gentle = motion({  transition: { type: "spring", stiffness: 120, damping: 20 },});<Chart definition={definition} renderer={gentle} ariaLabel="Weekly revenue" />

To stop the motion, use the static SVG renderer.

revenue-chart.tsx

import { svgChartRenderer } from "@tanstack/charts/svg/renderer";<Chart  definition={definition}  renderer={svgChartRenderer}  ariaLabel="Weekly revenue"/>

Charts use the colors --chart-1 to --chart-6. Set them for light and dark mode.

globals.css

:root {  --chart-1: oklch(0.24 0.012 168);  --chart-2: oklch(0.62 0.11 180);  --chart-3: oklch(0.63 0.13 75);  --chart-4: oklch(0.56 0.14 320);  --chart-5: oklch(0.48 0.13 32);  --chart-6: oklch(0.43 0.12 280);}.dark {  --chart-1: oklch(0.77 0.01 172);  --chart-2: oklch(0.63 0.11 180);  --chart-3: oklch(0.66 0.13 85);  --chart-4: oklch(0.53 0.15 320);  --chart-5: oklch(0.56 0.15 27);  --chart-6: oklch(0.66 0.12 280);}

To change one chart, set a color on its frame.

chart.tsx

<ChartFrame style={{ "--ts-chart-1": "var(--chart-3)" } as CSSProperties}>

ariaLabel names the chart for screen readers.
ChartTable gives screen readers the exact values.
Press Tab to focus a chart that has tooltips. Use the arrow keys to move between points.
Press Enter to pin a tooltip. Press Escape to close it.
When reduced motion is on, charts show at once and do not move.

API reference

TanStack Charts API

All parts also accept className and native HTML attributes.

ChartFrame

--ts-chart-1: color = var(--chart-1): The color of the first series. --ts-chart-2 to --ts-chart-6 set the other series. Set them in style to change the colors of one chart.

ChartAction

children: ReactNode: Controls for the chart, such as a period toggle.

Chart

Also accepts the props of the TanStack core Chart, such as definition, ariaLabel, height, and initialWidth.

renderer: ChartRenderer = chartMotion: Draws and animates the chart. chartMotion is a TanStack motion renderer with a spring.
children: ReactNode: Content on top of the plot, such as ChartCenter.

ChartLegendItem

color: stringRequired: The series color. Use the same value as the mark.
swatch: "square" | "line" | "dashed" = "square": The swatch shape. Use line for a line series and dashed for a dashed line.

ChartTable

caption: stringRequired: Names the table for screen readers.
columns: string[]Required: Column headings. The first column labels each row.
rows: (string | number)[][]Required: The exact values. The table is visible to screen readers only.

Line charts

From gallery to app

Installation

Usage

Composition

Motion