Data
Area Chart
semantic HTMLTrend visualization emphasizing cumulative magnitude.
Live example
| Mon | Media 38%, Documents 24%, Backups 12% |
|---|---|
| Wed | Media 51%, Documents 36%, Backups 18% |
| Fri | Media 64%, Documents 45%, Backups 25% |
| Sun | Media 72%, Documents 59%, Backups 33% |
<div data-standard-component="area-chart" label="Storage usage" description="Click legend items to show or hide a data type" data='{"labels":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"series":[{"name":"Media","data":[38,44,51,49,64,68,72]},{"name":"Documents","data":[24,31,36,42,45,53,59]},{"name":"Backups","data":[12,14,18,22,25,28,33]}]}'><table><caption>Storage usage by data type</caption><tbody><tr><th>Mon</th><td>Media 38%, Documents 24%, Backups 12%</td></tr><tr><th>Wed</th><td>Media 51%, Documents 36%, Backups 18%</td></tr><tr><th>Fri</th><td>Media 64%, Documents 45%, Backups 25%</td></tr><tr><th>Sun</th><td>Media 72%, Documents 59%, Backups 33%</td></tr></tbody></table></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.1.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
ECharts SVG visualization with an accessible SSR data-table fallback.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->