shadcn.io is not affiliated with official shadcn/ui
Emissions Chart Awards Block for Solid
A split for a carbon-accounting tool: three facts at the start and, in a framed figure at the end, a stacked bar chart of yearly emissions falling over five years with a drawn flag above each year an award arrived.
Installation
Overview
An emissions chart for Solid with Ark UI. A header and three facts counted from the data (the fall since 2021 in per cent, and the scope 1 and scope 2 totals for the latest year) sit at the start of a split. At the end, in a framed figure with a + mark on each corner, is a stacked bar chart drawn in SVG: scope 2 below, scope 1 above, a total over each bar and the years along the foot. Above each of the three years in which an award arrived stands a small drawn flag. Hover or focus a flag to read the award, its programme, the year and what it recognised in a tooltip; on a touch screen the same awards are listed under the chart. The page's rails and top rule come from the Guides spine. It's built from Guides, Tooltip, inline SVG and your theme's tokens. The programme and the figures are made up for the example.
FAQ
How do I change the figures and the awards?
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.
How is the chart drawn?
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.
How do the flags work for keyboard and touch users?
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.
Is the data available without the picture?
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.