React chart components without a chart library
Every chart here is drawn in SVG by hand, with no Recharts, no D3 bundle and no runtime charting dependency to fight with. That means you can style them with your own tokens and change the shapes, because the geometry is in the file you installed. They were built for finance and analytics screens, so the defaults are dark, dense and readable at small sizes.
17 components, installable with the shadcn CLI.
Candlestick
Candles over a volume histogram with a magnet crosshair and a live OHLC legend.
View componentEquity & Drawdown
An equity curve over a synced drawdown panel, one crosshair driving both.
View componentSMA Chart
A price line with fast and slow SMA overlays and crosshair scrubbing.
View componentDotted Area Chart
A price line on a field of dots. Scrubbing lights the stretch you have passed and dims the rest.
View componentBalance Chart
A wallet-value area chart. Trend picks the colour, scrubbing prints the value.
View componentDonut Chart
Allocation as a ring around an open centre. The ring and its legend cross-highlight.
View componentSectors Donut
An allocation ring that dims every weight but the one you hover.
View componentRatings Radar
An analyst-ratings pentagon pulled toward the dominant rating.
View componentAnalyst Radar
Two series on one factor web. Hover a spoke to read both, mute one to read the other.
View componentHistorical EPS
Forecast vs reported quarterly bars, with a Beat-by tip and a surprise tooltip.
View componentMarket Heatmap
The market as one block of ground: tiles sized by cap, tinted by the day's move.
View componentSankey Flow
Income pools in one hub and fans out into uses, ribbon thickness standing for amount.
View componentHealth Gauge
A 270° dial with a number that counts up to its value. Click it to cycle metrics.
View componentPrice Target Fan
A year of price history, then dashed projections fanning to the high, mean and low targets.
View componentRange Navigator
A detail chart over a mini-map. Drag the window to pan, pull an edge to zoom.
View componentSimple Chart
A compact price card, one line and one number, scrubs under the pointer.
View componentPrice Scrubber
A scrub chart with a magnet crosshair and a hero number that recolours off the reference price.
View component
Questions
- Why no charting library?
- A charting runtime decides your visual language for you and then resists being changed. Plain SVG keeps the markup readable, the bundle small, and every visual decision editable in your own repo.
- Do they animate and respond to hover?
- Yes, where it helps reading. Hover states, scrubbing and transitions are built in, tuned so the motion does not get in the way of comparing values.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide