Data
Stacked Bar Chart
semantic HTMLPart-to-whole comparison across categories or periods.
Live example
| Jan | Published 30, Draft 12, Review 8 |
|---|---|
| Feb | Published 42, Draft 18, Review 10 |
| Mar | Published 38, Draft 14, Review 12 |
| Apr | Published 55, Draft 20, Review 9 |
<div data-standard-component="stacked-bar-chart" label="Content status" data='{"labels":["Jan","Feb","Mar","Apr"],"series":[{"name":"Published","data":[30,42,38,55]},{"name":"Draft","data":[12,18,14,20]},{"name":"Review","data":[8,10,12,9]}]}'><table><caption>Content status by month</caption><tbody><tr><th>Jan</th><td>Published 30, Draft 12, Review 8</td></tr><tr><th>Feb</th><td>Published 42, Draft 18, Review 10</td></tr><tr><th>Mar</th><td>Published 38, Draft 14, Review 12</td></tr><tr><th>Apr</th><td>Published 55, Draft 20, Review 9</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. -->