Component 44 · Data visualization
Chart frame
Provide title, legend, controls, plot and fallback table around a chart.
Overview
Provide title, legend, controls, plot and fallback table around a chart. It converts domain state into an understandable, traceable and accessible interface contract.
When to use
Use HE/Chart frame when you need to provide title, legend, controls, plot and fallback table around a chart. Keep its role distinct from transport freshness, animal-health severity and model confidence.
Example
Five-minute adaptive averages
Current 18.4 °C · synchronized
<figure class="he-chart-frame"><figcaption><b>Ambient temperature</b><p>Five-minute adaptive averages</p></figcaption><div class="he-chart__plot"><svg class="he-chart__line" viewBox="0 0 100 40" preserveAspectRatio="none" aria-label="Temperature rose gradually"><path d="M0 31 C18 29 24 30 36 24 S55 20 65 21 S82 13 100 10"></path></svg></div><p>Current 18.4 °C · synchronized</p></figure>Anatomy
Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.
Variants and states
Variants
States
Accessibility
Every chart has a summary, keyboard-readable values, and an equivalent data table.
- Maintain a visible keyboard focus indicator and a logical focus sequence.
- Never rely on colour alone for operational, freshness or severity state.
- Keep touch targets at least 44 × 44 px unless the target is an inline text link.
Cross-platform contract
| Surface | Canonical name | Status |
|---|---|---|
| Figma | HE/Chart frame | stable |
| Web | .he-chart-frame | implemented |
| Flutter | HeChartFrame | implemented |
| Token root | component.chartframe | generated |