Beautiful React Charts
for Modern Web Apps

Marketmarket-chart.tsx

Candles, volume, snapping crosshair, range selector, live tape.

Marketindicator-chart.tsx

Price, RSI and MACD on one time axis, one crosshair across all three.

Marketorder-book.tsx

Cumulative depth bars, a spread row, flashing live updates.

Marketdepth-chart.tsx

Bid and ask liquidity either side of the mid.

Marketportfolio-chart.tsx

Value against cost basis, drawdown from the running peak.

Marketcandlestick-chart.tsx

OHLC candles on Recharts, for when you are already using it.

Analyticsstat-cards.tsx

KPI tiles with scrubbable sparklines and health-aware deltas.

Analyticscalendar-heatmap.tsx

A year of daily values, five quantised steps, streak stats.

Analyticscohort-chart.tsx

The retention triangle, with a row and column crosshair.

Analyticshistogram-chart.tsx

Binned distribution with p50 / p95 / p99 pinned to the plot.

Analyticsmarket-heatmap.tsx

Squarified treemap on a diverging change ramp.

Marketprice-chart.tsx

Ticker chrome — last price and signed delta over a filled area.

Analyticssparkline-chart.tsx

Inline marks for watchlists and dense tables.

Corebar-chart.tsx

Ten fills — hatch, duotone, gradient, stripe, stack, glow.

Coreline-chart.tsx

Solid, dashed, bump, step, gradient and glow strokes.

Corearea-chart.tsx

Gradient, hatch, dotted, stacked and dashed-stroke fills.

Corecomposed-chart.tsx

Bars, lines and areas sharing one plot.

Corepie-chart.tsx

Pie and donut with padded sectors and labels.

Coreradar-chart.tsx

Filled or outline series on circle grids.

Coreradial-chart.tsx

Full and semi-circle radial bars for share and progress.