Chart states

What 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

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Chart states

Loading visits

The report could not be loaded. Try again in a minute.

No errors in this period.

Dark theme, Chart states

Loading visits

The report could not be loaded. Try again in a minute.

No errors in this period.

High contrast theme, Chart states

Loading visits

The report could not be loaded. Try again in a minute.

No errors in this period.

UsageLink to the section Usage

tsx

import { LineChart, BarChart } from '@skribly/ui/charts'

tsx

<LineChart {...props} isLoading loadingLabel="Loading visits" />
<LineChart {...props} error="The report could not be loaded. Try again in a minute." />
<BarChart {...props} data={[]} emptyState="No errors in this period." />

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

Loading is a status that is read politely and marks the figure busy.
An error is an alert with an icon and words, read at once.
The empty state is plain text with an icon.
None of them relies on colour, and the spinner stops under reduced motion.

This demo runs through axe in all three themes on every test run. See what the tests check.