Chart Placeholder
FreeA loading skeleton that occupies the same dimensions as the chart it replaces. Displays animated pulse bars, a circular donut outline, or a wavy line shape depending on the target chart type. Prevents layout shift while data is being fetched. Includes an accessible status announcement for screen readers.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| With Message |
Usage Guidelines
Match the placeholder dimensions to the actual chart to prevent layout shift.
Show a spinner instead of a skeleton — skeletons communicate structure.
Use the chart-specific variant when the type is known.
Leave an empty space while the chart loads — the layout jump is jarring.
Announce the loading state to screen readers with aria-busy and a live region.
Animate aggressively — keep the pulse subtle and smooth.
Use a subtle pulse animation at 1.5–2 second intervals.
Forget to handle the transition from skeleton to rendered chart.
Code
<div class="lex-chart-placeholder lex-chart-placeholder--bar"
role="status" aria-label="Loading chart data">
<div class="lex-chart-placeholder__bar"></div>
<div class="lex-chart-placeholder__bar"></div>
<div class="lex-chart-placeholder__bar"></div>
....lex-chart-placeholder {
display: flex;
align-items: flex-end;
gap: var(--lex-space-8);
padding: var(--lex-space-16);
background: var(--lex-bg-surface);
border-radius: var(--lex-radius-lg);
min-height: 200px;
}
.lex-chart-placeholder__bar {
flex: 1;
background: var(--lex-bg-surface-subtle);
border-radius: var(--lex-radius-xs);
animation: lex-pulse 1.5s ease-in-out infinite;
}
...// Using Lexicon CSS classes with React
<ChartPlaceholder
variant="bar"
height={300}
aria-label="Loading chart data"
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-chart-placeholder-bg | — | — | bg |
| --lex-chart-placeholder-border | — | — | border |
| --lex-chart-placeholder-text | — | — | text |
Accessibility
- Use role="status" or aria-live="polite" to announce loading state.
- Set aria-busy="true" on the chart container while loading.
- Provide aria-label="Loading chart data" on the placeholder.
- When data arrives, remove the placeholder and announce the chart via aria-live.