← All comparisons

Chart.ts vs shadcn/ui Charts

shadcn/ui Charts are copy-paste React chart components that wrap Recharts. They provide beautiful defaults but inherit Recharts limitations: large bundle, React-only, no RSC.

FeatureChart.tsshadcn Charts
Bundle size<15kb min+gzip (entire library)~45kb+ min+gzip (Recharts + D3 chain)
Tree-shakingFull (import only what you use)Limited (Recharts + D3 dependencies)
TypeScriptBuilt-in, strict mode, full inferenceBuilt-in types
SSRNative SSR, works with any frameworkClient components only (no RSC)
AccessibilityWCAG AA, keyboard nav, screen readers, pattern fillsBasic (Recharts underlying)
Tailwind CSSNative className on every element, dark: variantsStyled wrapper, but chart internals use inline styles
Chart types65+ built-in (52 core + 13 WebGL/3D)~6 (area, bar, line, pie, radar, radial)
FrameworksReact, Vue, Svelte, Solid, Angular, Vanilla JSReact only
LicenseMITMIT
RenderingTriple engine: SVG + Canvas + WebGL (auto-switching at 10k/100k points)SVG (via Recharts)
Real-TimeBuilt-in streaming, WebSocket, SSE, HTTP polling via @chartts/websocketNo
GPU / 3DWebGL renderer + @chartts/gl with 13 3D chart types (Scatter3D, Surface3D, Globe3D, etc.)No
Financial@chartts/finance: SMA, EMA, RSI, MACD, Bollinger Bands, ATR, VWAP, Sharpe ratioNo
PluginsdefineChartType() with render context, hit testing, custom scalesNo
InteractionsZoom, pan, brush selection, crosshair, linked chartsNo built-in
Advanced ChartsSankey, treemap, sunburst, chord, geo maps, network graphs, 3D globe6 types (wrapper components)
Theme Presets34 presets (Nord, Dracula, Catppuccin, Tokyo Night, Material, etc.)Tailwind theme

Why switch from shadcn Charts?

Chart.ts advantages

  • 65+ chart types vs 6
  • Works with any framework, not React-only
  • True Tailwind className on chart elements
  • Built-in WebGL/3D, streaming, financial charts
  • Under 15kb vs 45kb+ (Recharts + D3 chain)

shadcn Charts limitations

  • React only, no Vue/Svelte/Solid/Angular
  • Wraps Recharts, inheriting its ~45kb bundle
  • Only 6 chart types available
  • Chart internals use inline styles, not Tailwind
  • Requires Client Components (no RSC support)

Ready to switch?

Get started with Chart.ts in 30 seconds.

$npm install @chartts/core