Charts that feel alive.

Area charts

Visitors50,367+17.1% from the previous 30 days

Daily visitors
Date	Visitors
Sep 13	1091
Sep 14	1738
Sep 15	1818
Sep 16	1831
Sep 17	1800
Sep 18	1736
Sep 19	1221
Sep 20	1246
Sep 21	1845
Sep 22	1856
Sep 23	1934
Sep 24	1806
Sep 25	1725
Sep 26	1195
Sep 27	1246
Sep 28	1758
Sep 29	1934
Sep 30	1898
Oct 1	1962
Oct 2	1862
Oct 3	1241
Oct 4	1257
Oct 5	1789
Oct 6	1867
Oct 7	1891
Oct 8	2049
Oct 9	2079
Oct 10	1277
Oct 11	1411
Oct 12	2004

Area

Sessions by channel

Organic search
Direct
Referral
Paid ads

Monthly sessions by channel
Month	Organic search	Direct	Referral	Paid ads
October 2025	41200	17800	8200	6400
November 2025	43800	18400	9100	9800
December 2025	39600	16900	7600	11200
January 2026	45100	19200	8800	5100
February 2026	47300	19800	9400	5300
March 2026	50200	20500	12900	6900
April 2026	51800	21100	10100	7200
May 2026	53400	21600	10400	7400
June 2026	52100	20900	9800	6100
July 2026	50900	20200	9500	5800
August 2026	54700	22400	10600	8900
September 2026	58300	23800	11200	9600

Stacked area

Device share

Desktop
Mobile
Tablet

Monthly share of sessions by device
Month	Desktop	Mobile	Tablet
October 2025	52%	41%	7%
November 2025	51%	42%	7%
December 2025	46%	45%	9%
January 2026	49%	43%	8%
February 2026	49%	44%	7%
March 2026	48%	45%	7%
April 2026	47%	46%	7%
May 2026	47%	47%	6%
June 2026	45%	49%	6%
July 2026	42%	51%	7%
August 2026	44%	50%	6%
September 2026	42%	52%	6%

100% stacked area

Revenue forecast

Actual
Forecast
80% range

Monthly revenue and forecast, in dollars
Month	Actual	Forecast	Low	High
January 2026	182400
February 2026	189700
March 2026	201300
April 2026	198600
May 2026	212900
June 2026	219400
July 2026	216800
August 2026	228500
September 2026	236200
October 2026		243000	236000	250000
November 2026		251000	239000	263000
December 2026		262000	244000	280000
January 2027		268000	245000	291000
February 2027		276000	248000	304000
March 2027		285000	251000	319000

Range area

Visitors

Desktop
Mobile

Daily visitors for the last 30 days
Date	Desktop	Mobile
Sep 13	669	1034
Sep 14	1184	877
Sep 15	1330	824
Sep 16	1329	738
Sep 17	1200	825
Sep 18	1253	896
Sep 19	745	1013
Sep 20	729	939
Sep 21	1279	862
Sep 22	1178	807
Sep 23	1266	882
Sep 24	1375	763
Sep 25	1298	810
Sep 26	724	1032
Sep 27	706	953
Sep 28	1341	854
Sep 29	1202	915
Sep 30	1352	928
Oct 1	1358	868
Oct 2	1416	948
Oct 3	738	1083
Oct 4	674	1037
Oct 5	1349	830
Oct 6	1381	794
Oct 7	1427	871
Oct 8	1305	897
Oct 9	1356	803
Oct 10	729	1069
Oct 11	691	978
Oct 12	1269	852

Interactive area

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.

Area charts

From gallery to app

Installation

Usage

Composition

Motion