Target Line Bar Chart Stats Block for React

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.

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.

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.

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.

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.

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.