BarChart
Counts per day as columns, or a ranking as rows. Pick columns for a count over time and flag the days that need a look; pick rows for top lists, where names can be long and the screen narrow.
- BarChart
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Pricing2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
Dark theme, BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Pricing2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
High contrast theme, BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Pricing2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
UsageLink to the section Usage
import { BarChart } from '@skribly/ui/charts'<BarChart
label="Errors per day"
valueLabel="Errors"
data={days.map((day) => ({ id: day.iso, label: day.long, axisLabel: day.short, value: day.errors, highlight: day.errors > 30 }))}
highlightLabel="Spike"
keyboardHint="Use the arrow keys to read each day."
table={{ trigger: 'Show as table', categoryHeader: 'Date' }}
/>
<BarChart orientation="rows" ordered label="Top pages" valueLabel="Visits" data={pages} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Columns work like the line chart: one tab stop, arrow keys, Home and End, a polite live region, Escape to hide the tooltip, and a table of every value.
- A highlighted column has a marker above it and its meaning in the legend, the tooltip and what is read, so the flag does not rest on the colour.
- Rows are a plain list with every name and value in text; the bars are hidden from screen readers.
- Rows wrap their names and put the bar on its own line in a narrow box.
This demo runs through axe in all three themes on every test run. See what the tests check.