Charts
Plain SVG charts and figures for reports and dashboards, built to WCAG 2.2 AA as a target. Each chart is a named figure with a written summary; the arrow keys step through the data points and read each one; every value is also in a table behind a disclosure. Series differ by colour and by line pattern, and marks switch to system colours in forced colours. Charts draw at the width of their box, so labels keep their size at any zoom and thin out on narrow screens.
11 pages, 11 exports
- LineChart
- BarChart
- StackedBars
- DonutChart
- Sparkline
- ActivityHeatmap
- ScoreRing
- Delta
- MetricTile
- ChartLegend
- ChartTooltip
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { LineChart, BarChart, StackedBars, DonutChart, … } from '@skribly/ui/charts'Pages in this groupLink to the section Pages in this group
- LineChartA trend over time for one or more measures on one axis. Pick it for daily or weekly series; add the previous period as a ghost line to compare, and annotations for releases or incidents.LineChart
- Chart statesWhat a chart shows before and instead of its data: loading, an error and nothing to draw. Each keeps the height of the chart, so the page does not jump when data arrives.LineChart, BarChart
- BarChartCounts 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
- StackedBarsThe 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
- DonutChartThe share of a whole across a few parts, such as visits by device. Pick it for up to five parts; past that, the smallest fold into one "other" slice, and a bar chart may read better.DonutChart
- SparklineA tiny trend with no axes, for a tile, a table cell or a line of text. Pick it when the shape matters more than the numbers.Sparkline
- ActivityHeatmapDaily activity over months as a calendar, one column per week, such as commits over a year. Pick it to show rhythm and streaks; pick a bar chart for exact daily counts over a few weeks.ActivityHeatmap
- ScoreRingA score out of a known maximum, such as an audit result out of 100. Pick it for one to four headline scores; use Meter of the feedback group for levels in a list.ScoreRing
- DeltaThe 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
- MetricTileOne key figure with its change and recent trend, for a row of tiles at the top of a report. Pick StatCard of the surfaces group when the tile links to a full view.MetricTile
- ChartLegend and ChartTooltipThe key and the point readout every chart here uses, for a custom chart that should look the same. Pick ChartLegend whenever colour stands for more than one thing.ChartLegend, ChartTooltip