StackedBars
The parts of a whole for each row, such as page loads rated good, needs work and poor. Pick share to compare the mix between rows, and value to compare the totals as well.
- StackedBars
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- PricingGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
Dark theme, StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- PricingGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
High contrast theme, StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- PricingGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
UsageLink to the section Usage
import { StackedBars } from '@skribly/ui/charts'<StackedBars
label="Page load ratings"
mode="share"
segments={[
{ id: 'good', label: 'Good', color: 'ok' },
{ id: 'fair', label: 'Needs work', color: 'warn' },
{ id: 'poor', label: 'Poor', color: 'danger' }
]}
rows={pages.map((page) => ({ id: page.id, label: page.title, values: page.ratings }))}
keyboardHint="Use the up and down arrow keys to read each page."
table={{ trigger: 'Show as table', categoryHeader: 'Page' }}
/>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
- Every row name and total is text.
- The parts are written after each bar, on screen with showValues and for screen readers otherwise.
- The list is one tab stop: the arrow keys move between rows, show a tooltip with every part and read it politely.
- Parts are split by a gap that stays in forced colours, and the legend names every colour.
This demo runs through axe in all three themes on every test run. See what the tests check.