Bar Chart
Bars spring up in sequence when the chart enters view, show a value on hover, and keep a screen-reader table underneath.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Bar Chart
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | { label: string; value: number }[] | — | |
format | (value: number) => string | — | |
highlightMax | boolean | true | |
height | number | 200 |
About Bar Chart
Bar Chart springs its bars up one after another as it enters view, shows the value on hover and keeps an accessible table underneath, so the data is never only a picture.
Bar Chart is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Bar Chart
- Dashboard charts.
- Report and analytics pages.
- Pricing comparisons.
- Survey results.
How it works
Bars are scaled divs on staggered springs. highlightMax marks the top value, and a visually hidden table holds every label and number for screen readers.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Bar Chart
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change highlightMax, height live, and the Code tab updates to match, so the snippet you copy already carries your values.
- data.
- format ((value: number) => string).
- highlightMax (boolean, default true).
- height (number, default 200).
Goes well with Bar Chart
Bar Chart is already composed into 2 ready-made sections, so you can see it in context or install the whole block.
- Hero Split: Hero section
- Stats Chart: Social proof section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Bar Chart
npx shadcn@latest add https://charcoalui.com/r/bar-chart.jsonBar Chart is free and MIT licensed. The command copies bar-chart.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Split Flap, a Pro piece: Airport departure board: every cell flips through the drum until it lands on its letter.
Frequently asked questions
- Is the bar chart readable by screen readers?
- Yes. A visually hidden table holds every label and value, so the data is accessible even though the bars are visual.
- How do I install Bar Chart?
- Run npx shadcn@latest add https://charcoalui.com/r/bar-chart.json. The shadcn CLI copies bar-chart.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Bar Chart free for commercial use?
- Yes. Bar Chart is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Bar Chart work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Bar Chart?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Bar Chart's props and source and get_install_command returns the exact command.