Data
Funnel Chart
semantic HTMLStage-by-stage conversion and publishing workflow visualization.
Live example
| Ideas | 100 |
|---|---|
| Drafts | 72 |
| Review | 48 |
| Published | 36 |
<div data-standard-component="funnel-chart" label="Publishing funnel" data='{"values":[{"name":"Ideas","value":100},{"name":"Drafts","value":72},{"name":"Review","value":48},{"name":"Published","value":36}]}'><table><caption>Publishing funnel</caption><tbody><tr><th>Ideas</th><td>100</td></tr><tr><th>Drafts</th><td>72</td></tr><tr><th>Review</th><td>48</td></tr><tr><th>Published</th><td>36</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. -->