Charts that feel alive.

Browse charts

Pie and donut charts

Browsers

Chrome
Safari
Edge
Firefox
Samsung Internet
Other

Visitors by browser, last 30 days
Browser	Visitors	Share
Chrome	31840	61.7%
Safari	11920	23.1%
Edge	3610	7%
Firefox	1880	3.6%
Samsung Internet	1240	2.4%
Other	1117	2.2%

Pie

Subscriptions

Starter
Pro
Business
Enterprise

Active subscriptions by plan
Plan	Monthly price	Subscriptions
Starter	$12	1482
Pro	$49	864
Business	$149	311
Enterprise	$990	47

Donut with total

Cloud costs

Compute
Database
Storage
Network
Other

Cloud costs in September, by service, in dollars
Service	Cost	Share
Compute	4820	46.9%
Database	2960	28.8%
Storage	1450	14.1%
Network	730	7.1%
Other	310	3%

Rounded donut

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.

Pie and donut charts

From gallery to app

Installation

Usage

Composition

Motion