Data
Line Chart
semantic HTMLTrend visualization for values changing over time.
Live example
| Jan | Organic 120, Social 80, Email 45 |
|---|---|
| Feb | Organic 180, Social 110, Email 62 |
| Mar | Organic 150, Social 130, Email 58 |
| Apr | Organic 240, Social 170, Email 91 |
| May | Organic 310, Social 205, Email 104 |
<div data-standard-component="line-chart" label="Monthly visitors" description="Select a series from the legend" data='{"labels":["Jan","Feb","Mar","Apr","May"],"series":[{"name":"Organic","data":[120,180,150,240,310]},{"name":"Social","data":[80,110,130,170,205]},{"name":"Email","data":[45,62,58,91,104]}]}'><table><caption>Monthly visitors by source</caption><tbody><tr><th>Jan</th><td>Organic 120, Social 80, Email 45</td></tr><tr><th>Feb</th><td>Organic 180, Social 110, Email 62</td></tr><tr><th>Mar</th><td>Organic 150, Social 130, Email 58</td></tr><tr><th>Apr</th><td>Organic 240, Social 170, Email 91</td></tr><tr><th>May</th><td>Organic 310, Social 205, Email 104</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. -->