Data

Radar Chart

semantic HTML

Multi-dimensional score comparison across shared indicators.

stablefreeSince 0.1.5

Live example

Current and target content quality
Clarity	Current 84, Target 90
SEO	Current 76, Target 88
Depth	Current 68, Target 82
Freshness	Current 91, Target 94

<div data-standard-component="radar-chart" label="Content quality" data='{"indicators":[{"name":"Clarity","max":100},{"name":"SEO","max":100},{"name":"Depth","max":100},{"name":"Freshness","max":100}],"series":[{"name":"Current","value":[84,76,68,91]},{"name":"Target","value":[90,88,82,94]}]}'><table><caption>Current and target content quality</caption><tbody><tr><th>Clarity</th><td>Current 84, Target 90</td></tr><tr><th>SEO</th><td>Current 76, Target 88</td></tr><tr><th>Depth</th><td>Current 68, Target 82</td></tr><tr><th>Freshness</th><td>Current 91, Target 94</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. -->