Charts that feel alive.

Browse charts

Radial charts

Storage72.4 GB of 100 GB used

Storage use, in gigabytes
Status	Space
Used	72.4 GB
Free	27.6 GB

Radial progress

Revenue by region

North America
Europe
Asia Pacific
Latin America
Middle East and Africa

Revenue by region, third quarter of 2026, in dollars
Region	Revenue
North America	412000
Europe	286000
Asia Pacific	194000
Latin America	78000
Middle East and Africa	41000

Radial bars

Q4 goals

Ship the mobile app, 82%
Hire six engineers, 67%
Close 40 enterprise deals, 73%

Progress to fourth-quarter goals
Goal	Progress	Complete (%)
Ship the mobile app	9 of 11 features	82
Hire six engineers	4 of 6 hires	67
Close 40 enterprise deals	29 of 40 deals	73

Radial rings

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.

Radial charts

From gallery to app

Installation

Usage

Composition

Motion