Emissions Chart Awards Block for React

Edit YEARS at the top of the file: each year has scope1 and scope2 in tonnes of CO2e and a fixed year. Edit AWARDS for the flags: each has a category, programme, recognised sentence and the year it arrived, which places its flag above that year's bar. The scale, the totals and the "down 62%" figure are worked out from YEARS.

One SVG with preserveAspectRatio="none" holds the grid lines and the stacked bars, computed from the data against a ceiling rounded up to the next fifty tonnes. The totals, the axis numbers and the years are plain text placed at percentages over it. Scope 2 is solid foreground and scope 1 a lighter step of it, with a thin hairline between them, so nothing depends on colour.

Each flag is a button, so Tab reaches it and the tooltip opens on focus as well as on hover; Escape closes it. A touch screen has no hover, so the awards are also listed under the chart on devices that can't hover. On a wide screen with a pointer that list is kept for screen readers only, so the same text is never missing.

Yes. The chart is hidden from assistive technology, and an unseen table inside the figure lists every year with its scope 1, scope 2 and total. The facts at the start give the fall since the first year and the latest scope totals.

The block doesn't say so. It marks the years in which awards arrived and says what each recognised, and leaves the reader to compare. Describe how you measured scope 1 and scope 2 in your own copy.

No. Lowenna and the Kelphaven programmes are made up, and so are the emissions. Replace them with your own footprint and awards, and keep the units and the scopes you report under.