Chart catalog

Charts that work the way your product does.

Open a chart, preview the demo, then copy the shadcn install command or the source from the docs.

31

Components

Every item ships with live previews, install commands, usage snippets, and source code.

bash
npx shadcn@latest add https://livedocs.xyz/r/area-chart.json

Charts

31 components

Sparkline

Smooth SVG trend with a scrubbable marker, value tooltip, and size tones. No Recharts.

Area Chart

Compound area chart with gradient, hatched, glow, selection, tooltip, legend, and brush.

Line Chart

Compound line chart with dashed strokes, glow, curve types, dots, tooltip, and legend.

Bar Chart

Compound bar chart with stacked, horizontal, hatched, duotone, stripped, and gradient fills.

Composed Chart

Mix bars, areas, and lines on one cartesian surface. Bars sit in back, lines paint last.

Pie Chart

Donut or pie with padding, glowing sectors, click-to-select, tooltip, and legend.

Radar Chart

Filled or outlined radar with polygon or circle grid, glow, and series selection.

Radial Chart

Full or semi radial bars with background tracks, rounded caps, tooltip, and legend.

Sankey Chart

Flow diagram with nodes, weighted links, and themed strokes.

Trend Card

Metric tile with overlay lines for this period vs last, a delta chip, and a compact chart.

Metric Chart

Hero metric with a delta badge, series pills, and a gradient well with axes.

Comparison Chart

Two overlapping gradient areas for this year vs last, with a KPI and delta.

Breakdown Chart

Clickable share stack with labeled rows, amounts, and percents.

Range Chart

Forecast band from low to high with an actual line sitting in the middle.

Country Chart

Ranked market bars with a last-period marker on each row.

Ring Metric

Donut with a total in the hole and a percent legend.

Cashflow Chart

Diverging bars from zero: inflow up, outflow down.

Spotlight Chart

Linear area with a dashed prior series and a callout on the peak.

Lane Chart

Horizontal outcome lanes compared against a shared max.

Usage Meter

Quota remaining with a used track and a reset caption.

Heatmap Chart

Calendar contribution grid with month headings, five token-based intensity levels, an interactive legend, keyboard navigation, and reduced-motion-aware entrance. Supports categorical matrices.

Funnel Chart

Horizontal symmetric funnel with smooth narrowing flow, layered halos, stage totals, conversion pills, and reduced-motion-aware staggered entrance.

Scatter Chart

XY point plot with series groups, optional bubbles, mean quadrants, and labeled axes.

Waterfall Chart

Connected balance bridge with signed changes, absolute totals, keyboard exploration, and an accessible data table.

Candlestick Chart

OHLC candles with solid green up and red down bodies, crosshair tooltips on hover or focus, optional volume, and an accessible data table.

Activity Chart

Compact rounded-bar metric card with a Polar title, headline value, tooltip, and hover dimming.

Live Price Chart

Streaming crypto price with volume bars, MA overlay, timeframe pills, and 24h stats.

Order Book

Live bid/ask ladder with depth bars, spread readout, and imbalance meter.

Depth Chart

Cumulative bid/ask staircase with mid-price marker and hover inspection.

Trades Feed

Live time-and-sales tape with side colors and new-print flash.

Market Movers

Gainers/losers screener with sparklines, change pills, and live ticks.