Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Grouped Bar Chart Stats Block for React

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 Base UI. 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.

  • Pro

    Stacked Bar Chart Stats

    Bar and column

    Twelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.

  • Pro

    Vertical Bar Chart Stats

    Bar and column

    Seven weekday columns for a gym's check-ins in a card in card, the busiest day drawn in full and the others at 30%, with the count above each column and a one-line takeaway under the axis.

  • Pro

    Diverging Bar Chart Stats

    Bar and column

    Twelve monthly returns as bars above and below a labelled zero line: gains solid, losses outlined, every value at its tip with a sign, and no green or red.

  • Pro

    Period Comparison Table Stats

    Comparisons

    A five-row month-on-month report with this period, the period before, and a bar for the size of each change.

  • Pro

    Area Chart With Pill Tabs Stats

    Area and line

    A framed area chart for a traffic analytics tool with pill tabs for Day, Week, Month and Year: choosing one swaps the readings, the labels under the chart and the total, whose digits roll.

  • Pro

    Slope Chart Stats

    Area and line

    Six clubs on two vertical axes, after the first and the second quarter, with a solid 2 px line for a club that climbed and a dashed 1 px line for one that slipped, labelled at both ends with the change.

All 122 stats blocks