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.
16 components, installable with the shadcn CLI.
Candlestick Chart
A candlestick chart with a volume histogram, a magnet crosshair and a live OHLC legend, for stock and crypto trading terminals.
View componentEquity & Drawdown
An equity curve with a synced drawdown chart for backtests and trading performance, one crosshair reading return, drawdown and days below peak.
View componentSMA Chart
A stock price chart with 20 and 50 day simple moving average overlays and crosshair scrubbing, for trading and technical analysis screens.
View componentDotted Area Chart
A crypto price area chart on a dotted field; scrub it to light the stretch you have passed and read the price and move at any point.
View componentBalance Chart
A wallet balance chart for crypto and banking apps: an area line coloured by trend, with high and low marks and timeframes from 1H to All.
View componentDonut Chart
A crypto portfolio donut chart that shows allocation as a ring with the total in the centre, the ring and its legend highlighting together.
View componentSectors Donut
A sector allocation donut for ETF and fund pages that shows each sector weight and dims the rest while you hover one.
View componentRatings Radar
An analyst ratings chart for stock research pages, spreading strong buy to strong sell on a pentagon pulled toward the consensus.
View componentAnalyst Radar
A factor score radar chart for equity research, comparing a company with its sector on value, growth, profit, momentum and quality.
View componentHistorical EPS
A quarterly EPS chart for stock research and earnings screens, with forecast against reported bars and the surprise on hover.
View componentMarket Heatmap
A stock market heatmap with tiles sized by market cap and tinted by the daily move, for market overview and trading dashboards.
View componentSankey Diagram
A Sankey diagram for cash flow, budgets and fund flows, where income pools in one hub and each ribbon width stands for the amount.
View componentHealth Gauge
A gauge chart for margin ratio, fear and greed or liquidity scores, on a 270 degree dial that counts up and cycles metrics on click.
View componentPrice Target Fan
An analyst price target chart for stock research: a year of price history, then projections fanning out to the high, mean and low targets.
View componentRange Navigator
A price history chart with a range selector minimap; drag the window to pan and pull an edge to zoom, for trading and analytics apps.
View componentPrice Scrubber
A stock price chart you scrub with a magnet crosshair and price and time badges on the axes, the headline price turning green or red against the open.
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