# Bars Printed bars on the panel, one value each. The bars are ink laid flat on the plate, never a colour and never glass; the axis is engraved into it, a groove along the zero line with the light on its lower lip and a faint rule at each tick. The values are a real list, one item a bar, so a screen reader reads “Thu, 73” and the picture is drawn over it. Columns by default, rows when the labels are long, and on display glass the ink is the display’s light. Kit part · Free · https://tactileui.dev/parts/bars - Element: `

` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Charts - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Columns · with the highest marked ```html

Builds per day

Mon 42
Tue 58
Wed 51
Thu 73, highest
Fri 66
Sat 24
Sun 18

``` ### Rows · .tui-bars--row ```html

Berths booked by office

Harbour 128
Quay Street 96
Dockside 71
Pilot office 33

``` ### Twelve columns · narrow ```html

Bookings by month

Jan 12
Feb 18
Mar 15
Apr 22
May 30
Jun 41
Jul 38
Aug 35
Sep 28
Oct 24
Nov 19
Dec 14

``` ### On display glass · the display’s light ```html

Builds per day

Mon 42
Tue 58
Wed 51
Thu 73, highest
Fri 66
Sat 24
Sun 18

``` ### A zero among them ```html

Fuel stops

Mon 3
Tue 0
Wed 5
Thu 2

``` ### No caption · named by aria-label ```html

Mon 42
Tue 58
Wed 51
Thu 73

Builds per day

Mon 42
Thu 73, highest

``` ```js import { barsHTML, barsScale } from '/kit/kit.mjs'; barsScale(73); // { max: 80, ticks: [0, 20, 40, 60, 80] } whole steps of 1, 2 or 5 figure.outerHTML = barsHTML({ title: 'Builds per day', items: [{ label: 'Mon', value: 42 }, { label: 'Thu', value: 73, mark: true, note: 'highest' }], orient: 'column', // or 'row' }); ``` The demo on the page: ```html

Builds · Northwind

Builds per day

Mon 42
Tue 58
Wed 51
Thu 73, highest
Fri 66
Sat 24
Sun 18

``` ## Usage notes Press Change the values: the bars slide to their new heights, and the figures and the list change with them. Press Show as rows to lay the same values along rows. The highest bar is hatched and outlined as well as bold, so it does not rely on ink alone. ## Accessibility - The values are a real `

` of items, each reading its label and then its figure (“Thu, 73”), so a screen reader gets every value in order. The bars and the axis are `aria-hidden`; nothing depends on seeing them. - A marked bar is hatched, outlined, bold in its label and bold in its figure, and says why in words for a screen reader. Bars are never told apart by colour: there is only ink. - The figures print at the end of each bar, so nobody has to read a height off an axis. Axis figures are in the secondary ink, above 4.5:1 on the plate in every finish. - Updating a value moves the bar in 220 ms; under reduced motion it moves at once. The list changes with the picture, so the two cannot disagree. - Labels shorten with an ellipsis rather than wrap when columns are many; the full text is still in the list. Nothing makes the page scroll sideways at 390px. ## How it’s built Each bar is ink on the plate with the height set from two numbers in CSS, `--v` over `--max`, so there is no script and no canvas. The axis is a set of spans placed from their own `--at`, with the zero line engraved the way the kit engraves a rule: a dark cut and a lit lower lip, which Quiet draws as a hairline. On glass the ink is the display’s own light. ## Rules Compare a handful of values side by side: ink bars on the plate, an engraved axis, each value printed at the end of its bar and listed for a screen reader. The full rules are in `bars.rules.md` in the brain, which ships with the Kit. ## Related parts - [LED bar chart](https://tactileui.dev/parts/ledbars): A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value. - [Plot](https://tactileui.dev/parts/plot): Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now. - [Sparkline](https://tactileui.dev/parts/sparkline): A word-sized line for the margin of a table or beside a readout. It is an SVG that takes the size of the type around it and the ink of the place it sits in, so on a panel it is ink and on display glass it is the display’s light. The last value is marked with a dot seated in a faint ring, and a lamp lights the dot when the reading matters. The trend and the last value are said in words on the image’s label, so the line is a second sign and never the only one.