shadcn.io is not affiliated with official shadcn/ui
Vertical Bar Chart Stats Block for React Aria
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.
Installation
Overview
A vertical bar chart for React with React Aria. A centred header names the busiest weekday and its share of the week, then a narrow card in card (a muted shell around a raised panel) holds the week's total check-ins, rolling up once in view, the busiest day, and seven rounded columns, one per weekday, with the count written above each. The busiest day is drawn at full strength and the other six at 30%, so the eye lands on it before it reads a number. Under the axis a one-line takeaway compares the quietest day with the busiest. Every column height, count, share and sentence is computed from one list of daily counts, so the drawing and the text can't disagree. The columns are plain CSS boxes in your theme's foreground colour: no chart library, and no colour to mean good or bad. For a gym, a studio, a coworking space, or any page that shows a weekly rhythm.
FAQ
How do I change the days and the counts?
Edit DAYS at the top of the file: each entry has a full name, a short name for the axis and a count. The total, the busiest and quietest days, the column heights, the shares in the headline and the takeaway are all computed from it. Keep seven entries so the grid keeps its seven columns, or change grid-cols-7 to match.
How are the columns sized?
Each column's height is its count as a share of the biggest count, so the busiest day fills the plot and the others scale from it. The count sits just above its column, and the plot has room above it for the label. The axis starts at zero: a column twice as tall is twice the count.
Is it accessible?
Yes. The columns are a list: each item reads the weekday and then its count ("Monday: 412"), and the drawn bars and the axis labels are hidden from assistive technology because the list says the same. The takeaway is the figure's caption. Counts sit in bdi elements, and the plot is left to right in right-to-left pages, so the week still starts with Monday at the start of the line.
Why is only one column drawn in full?
Emphasis comes from weight, not colour: the busiest day is the text colour at full strength and the rest are 30% of it, so it works in every theme and doesn't claim that a busy day is good or bad. If a day needs to raise an alarm, give it a status icon rather than tinting the bar.