Data
Bar Chart
semantic HTMLCategory comparison using horizontal or vertical bars.
Live example
| Guides | Published 42, Draft 18, Review 10 |
|---|---|
| News | Published 28, Draft 12, Review 8 |
| Case studies | Published 19, Draft 9, Review 6 |
| Updates | Published 34, Draft 16, Review 11 |
<div data-standard-component="bar-chart" label="Posts by category" data='{"labels":["Guides","News","Case studies","Updates"],"series":[{"name":"Published","data":[42,28,19,34]},{"name":"Draft","data":[18,12,9,16]},{"name":"Review","data":[10,8,6,11]}]}'><table><caption>Posts by category and status</caption><tbody><tr><th>Guides</th><td>Published 42, Draft 18, Review 10</td></tr><tr><th>News</th><td>Published 28, Draft 12, Review 8</td></tr><tr><th>Case studies</th><td>Published 19, Draft 9, Review 6</td></tr><tr><th>Updates</th><td>Published 34, Draft 16, Review 11</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. -->