Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Target Line Bar Chart Stats Block for React Aria

Fourteen daily bars against a labelled quota line in a framed chart, days at or above the quota solid and days below it outlined, with a two-cell band under it for days met and the average against the quota.

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 bar chart with a target line for React with React Aria. A start-aligned header says how many of the last fourteen working days met the daily call quota. Under it, one framed chart (a figure with + marks on its corners) draws fourteen bars against a labelled quota line that crosses every bar: a day at or above the quota is a solid bar, a day below it is an outline, so the pattern reads without any colour. A scale on the start side carries 0 to 100 and the quota's own label. Beneath the chart a two-cell band gives the count of days met, rolling up once in view, and the average per day against the quota with how far over or under it sits. Every bar, the count, the average and the headline are computed from one list of daily calls, and the same numbers are an unseen table for screen readers. For sales, support and any metric with a daily bar to clear.

FAQ

How do I change the calls, the quota and the scale?

Edit CALLS (one number per day, oldest first), QUOTA and, if a day goes past 100, CEILING and TICKS. Which bars are solid, the count met, the average, the gap and the headline are computed from them. With a different number of days, the bars share the width equally and the axis labels thin out on a phone.

How is the quota line drawn?

It is a 2-pixel line of the text colour across the plot at the quota's height, with a halo of the page colour around it, so it stays visible where it crosses a solid bar. The quota's label sits on the scale at the same height, on a patch of the page colour so it doesn't run into the nearest tick.

Is it accessible?

The drawing is hidden from assistive technology and replaced by a table with one row per working day: the day, the calls and whether the quota was met. The figure's caption names the chart and the quota. The two figures under it are a description list, and the numbers sit in bdi elements. Nothing depends on colour: solid and outlined bars differ in shape, and a key under the axis says which is which.

Does it work in right-to-left pages?

The chart box is forced left to right, because time runs from the oldest day at the start of the line in every language, and the day numbers don't mirror. The header, the key and the band follow the page's direction.

What moves, and what happens with reduced motion?

The header and chart fade up once on load, the bars grow from the baseline one after another and the two figures roll up when they scroll into view. With reduced motion everything is off and the finished chart is simply there.

How does it fit on a phone?

The plot is shorter, the bars and gaps narrower and the day labels show every other day, while the table still lists all fourteen. The two band cells stay side by side with smaller figures, and nothing scrolls sideways at 320 pixels.

All 122 stats blocks