Vertical Bar Chart Stats Block for React

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.

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.

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.

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.

The header and card fade up once on load, the columns grow from the baseline one after another and the counts fade in, all with CSS transitions. With reduced motion every transition is off and the finished chart is simply there.

The plot gets a little shorter and the gaps between columns narrow, so the seven columns and their three-digit counts fit at 320 pixels. The card keeps its shell and nothing scrolls sideways.