Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Grouped Bar Chart Stats Block for React Aria

Two bars per month, this year solid and last year lighter, with a Chart and Table switch that swaps the drawing for a real table of the same numbers in the same box.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A grouped bar chart for React with React Aria. A start-aligned header gives the growth on last year, "Loaves sold are up 11.8% on last year", with the two six-month totals, and a Chart and Table switch at the end of the row. The framed figure draws two bars per month, this year in the full text colour and last year at a lighter weight, with the change on last year above each group (hidden on a phone, where the table has it). The switch swaps the drawing for a real table (month, this year, last year, change) in the same box, so the block never changes height. A legend that is real text names the two bars. The heights, changes, totals and headline are computed from one typed list of months. The switch cannot be turned off: pressing the active button does nothing.

FAQ

How do I change the months?

Edit MONTHS (a name and the two readings per month) and CEILING and TICKS for the vertical scale. The bars, the table, the changes, the totals, the headline and the six month columns are derived from the list; if you add months, change grid-cols-6 to match.

How does the Chart and Table switch work?

It is a toggle group with one pressed button at a time, so it behaves like a pair of tabs and always shows something. Both views sit in the same grid cell: the one that is not showing is invisible, inert and hidden from assistive technology, which keeps the box the same height in both views.

Why is there a table when the chart shows the numbers?

The chart shows the shape; the table has the exact figures. In chart view the same table stays in the page, visually hidden, so screen readers always get every number; in table view it is the visible view. It is a plain table with a caption, column and row headers and right-aligned tabular numbers.

How are the two years told apart?

By weight, not hue: this year is solid and last year is the same colour at 30%. The legend says so in text, and the change above each group is a signed number. That keeps the chart readable in every theme preset and in greyscale.

How does it fit on a phone?

All six months stay with the bars side by side, narrower; the changes above the groups are dropped (the table has them) and the switch sits under the sentence.

All 122 stats blocks