Delta
The change of a figure against an earlier period, with its direction and whether that is good news. Pick it beside a headline number, in a tile or a table.
- Delta
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Delta
Up22%, bettervs previous 28 daysUp8.1%, worseload time vs last weekDown3.4%, worseNo change0.0%vs yesterdayDown42%share of mobile visitsNo earlier data to compare
Dark theme, Delta
Up22%, bettervs previous 28 daysUp8.1%, worseload time vs last weekDown3.4%, worseNo change0.0%vs yesterdayDown42%share of mobile visitsNo earlier data to compare
High contrast theme, Delta
Up22%, bettervs previous 28 daysUp8.1%, worseload time vs last weekDown3.4%, worseNo change0.0%vs yesterdayDown42%share of mobile visitsNo earlier data to compare
UsageLink to the section Usage
import { Delta } from '@skribly/ui/charts'<Delta
value={0.224}
directionLabels={{ up: 'Up', down: 'Down', flat: 'No change' }}
assessmentLabels={{ good: 'better', bad: 'worse' }}
comparison="vs previous 28 days"
/>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
- The arrow is hidden and the direction is read as a word before the number.
- Good and bad are a colour and, with assessmentLabels, a word for screen readers, so nothing rests on colour alone; the text colours meet 4.5:1 in every theme.
- The comparison wraps under the number in a narrow box.
This demo runs through axe in all three themes on every test run. See what the tests check.