ChartState

Usage

import { ChartState } from '@acronis-platform/ui-react';

ChartState provides the visual states for a chart slot. The consumer selects the state explicitly; the component does not infer it from chart data. Loading uses the shared spinner. Empty, warning, and error share the 64px circle and 24px glyph treatment from the Breakpoints widget-state designs. Number shows a centered, disabled-style KPI value.

<ChartState state="loading" />
<ChartState state="empty" description="No activity for this period" />
<ChartState state="warning" description="Some results could not be loaded" />
<ChartState state="error" description="We couldn't load this chart" />
<ChartState state="number" description="0 GB" />

The state prop is required. Each state has fallback content; pass description to provide localized or context-specific copy. For number, the description is the numeric value and unit; it defaults to 0.

Accessibility

The root is the live region: loading, empty, warning, and number use role="status" with aria-live="polite"; error uses role="alert" with aria-live="assertive". These state semantics override conflicting role and live-region props. Icons are decorative, and the displayed content supplies the meaning.

The component does not set aria-busy: this placeholder is unmounted when the chart replaces it. If needed, put aria-busy on the chart-slot container.

The error state can scroll long descriptions vertically. Unbroken strings wrap within the available width, keeping diagnostic messages accessible without changing the widget's outer layout.

API Reference

Not WidgetPlaceholder

• ChartState goes inside a chart slot and shows the state selected by the consuming application.
• WidgetPlaceholder is a composable skeleton for a whole tile that is not a chart or is still being set up.

Reach for ChartState when a chart has no usable data; use WidgetPlaceholder when the widget itself is not ready.