Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA bar chart whose values are in tooltips and in text: each bar is a focusable named image and a hidden data table repeats every value for screen readers.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for small summary charts on dashboards where each value matters and the chart does not need axes or zoom.
Do not use it for large series (use a charting library) or for data people need to compare precisely; show numbers or a table.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
data | { label, value }[] | - | Bars. |
unit | string | - | What is measured. |
title | string | - | Name of the chart and caption of the data table. |
role="img" with the value in its name ("Jun: 88 signups"), and focusable so the tooltip opens from the keyboard.table with a caption repeats the data, which is how screen reader users read a chart.| Key | Action |
|---|---|
| Tab | moves bar by bar and shows each value |
The pattern ships a Testing Library test (tooltip-chart-bars.test.tsx) that covers bar names, the data table, relative heights and the focus tooltips.