Charcoal UI

React Chart and Data Table Components

Animated React charts and tables: line, bar, sankey, candlestick, treemap and data tables.

About these chart and data table components

Charts that animate in and stay readable: line, area, bar, donut and sparklines for dashboards, plus the finance and flow charts most libraries skip, such as candlesticks, order books, volume profiles, sankey diagrams, treemaps, funnels and bump charts.

The data tables sort, search, select, edit in place and load more as you scroll. Every chart is plain SVG or canvas written in the file, with no charting library to install.

Where they earn their keep

  • SaaS and analytics dashboards.
  • Trading and crypto interfaces.
  • Reports and investor updates.
  • Admin panels with large tables.

How they are built

Layouts are computed in each file from your data, so there is no dependency and nothing to configure globally. Charts have text alternatives, tooltips follow the pointer, and number formatting is a function you pass.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 24 chart and data table components

3 are free and MIT licensed, and 21 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Bar Chart: An animated React bar chart that springs up in sequence with an accessible table
  • Donut Chart (Pro): An animated React donut chart: segments draw in and thicken on hover
  • Activity Heatmap (Pro): A React contribution heatmap with four shades, tooltips and keyboard navigation
  • Sparkline (Pro): An animated React sparkline with fill, trend colour and a pulsing end dot
  • Line Chart (Pro): An animated React line chart with a snapping crosshair and multi-series tooltips
  • Area Chart (Pro): An animated React area chart with a comparison series and a target line
  • Gauge (Pro): An animated React dial gauge with colour bands and a springy needle
  • Sankey Chart (Pro): An animated React Sankey diagram where hovering a flow lights its whole path
  • Treemap Chart (Pro): A squarified React treemap with tiles tinted by change and labels that fit
  • Candlestick Chart (Pro): A React candlestick chart with volume, a crosshair and an OHLC readout
  • Funnel Chart: A React conversion funnel that shows the drop-off between every stage
  • Bump Chart (Pro): A React bump chart for rankings over time with focusable, highlighted series
  • Stacked Chart (Pro): A React stacked bar and area chart, in totals or percentages, with a toggling legend
  • Order Book (Pro): A live React order book with depth bars, spread and flashing size changes
  • Volume Profile (Pro): A React volume profile with buy and sell volume per price and the value area
  • Depth Heatmap (Pro): A React liquidity heatmap of order book depth over time, drawn on canvas
  • Returns Calendar (Pro): A React monthly returns calendar with yearly totals and colour-scaled cells
  • Price Fan Chart (Pro): A React price target chart where analyst targets fan out from today
  • Uptime Bar: A React status page uptime bar with a tooltip for every day
  • Data Table (Pro): A complete React data table with sorting, search, selection and pagination
  • Editable Table (Pro): A spreadsheet-style React table you edit in place, with totals and keyboard moves
  • Async Table (Pro): A React table that loads more rows as you scroll, with skeletons and retry
  • Slosh Gauge (Pro): A React tank gauge whose liquid sloshes, tilts and splashes as the value changes
  • Prediction Market (Pro): A React prediction market card with odds, history and a buy panel

Install one

npx shadcn@latest add https://charcoalui.com/r/bar-chart.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do I need Recharts or D3?
No. Each chart computes its own layout and draws with SVG or canvas, so it adds no dependency beyond Motion.
Can the charts handle live data?
Yes. Pass new data and they animate to it; the order book and depth heatmap are built for frequent updates.
Are the data tables accessible?
Yes. They are real table elements with sortable headers marked with aria-sort, labelled checkboxes and keyboard-friendly editing.
Do these chart and data table components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.