Radar Chart
SVG radar chart for multi-axis data visualization.
Basic Usage
Fully declarative format: each value is its own element with label attribute.
80
65
90
45
70
<radar-chart>
<chart-series name="Player" color="#3b82f6">
<chart-value label="Speed">80</chart-value>
<chart-value label="Power">65</chart-value>
<chart-value label="Defense">90</chart-value>
<chart-value label="Magic">45</chart-value>
<chart-value label="Luck">70</chart-value>
</chart-series>
</radar-chart>
Multiple Series
Compare multiple data sets on the same chart. Labels are shared across series.
90
85
80
75
70
65
70
90
85
80
60
75
Click a data point to see details
<radar-chart>
<chart-series name="Alice" color="#3b82f6">
<chart-value label="HTML">90</chart-value>
<chart-value label="CSS">85</chart-value>
<chart-value label="JavaScript">80</chart-value>
<chart-value label="React">75</chart-value>
<chart-value label="Node.js">70</chart-value>
<chart-value label="SQL">65</chart-value>
</chart-series>
<chart-series name="Bob" color="#22c55e">
<chart-value label="HTML">70</chart-value>
<chart-value label="CSS">90</chart-value>
<chart-value label="JavaScript">85</chart-value>
<chart-value label="React">80</chart-value>
<chart-value label="Node.js">60</chart-value>
<chart-value label="SQL">75</chart-value>
</chart-series>
</radar-chart>
Custom Styling
Customize colors, opacity, and visibility options.
85
70
95
60
80
60
90
75
85
70
<radar-chart fill-opacity="0.4">
<chart-series name="Team A" color="#8b5cf6">
<chart-value label="Strategy">85</chart-value>
<chart-value label="Teamwork">70</chart-value>
<chart-value label="Execution">95</chart-value>
<chart-value label="Creativity">60</chart-value>
<chart-value label="Communication">80</chart-value>
</chart-series>
<chart-series name="Team B" color="#ec4899">
<chart-value label="Strategy">60</chart-value>
<chart-value label="Teamwork">90</chart-value>
<chart-value label="Execution">75</chart-value>
<chart-value label="Creativity">85</chart-value>
<chart-value label="Communication">70</chart-value>
</chart-series>
</radar-chart>
No Dots / No Legend
Minimal chart without dots and legend.
75
80
65
90
70
<radar-chart id="minimal">
<chart-series color="#64748b">
<chart-value label="A">75</chart-value>
<chart-value label="B">80</chart-value>
<chart-value label="C">65</chart-value>
<chart-value label="D">90</chart-value>
<chart-value label="E">70</chart-value>
</chart-series>
</radar-chart>
<script>
minimal.showDots = false;
minimal.showLegend = false;
</script>
Different Sizes
Charts can be rendered at various sizes.
70
85
60
90
80
65
90
75
85
<radar-chart size="200">
<chart-series color="#14b8a6">
<chart-value label="A">70</chart-value>
<chart-value label="B">85</chart-value>
<chart-value label="C">60</chart-value>
<chart-value label="D">90</chart-value>
</chart-series>
</radar-chart>
<radar-chart size="300">
<chart-series color="#f97316">
<chart-value label="A">80</chart-value>
<chart-value label="B">65</chart-value>
<chart-value label="C">90</chart-value>
<chart-value label="D">75</chart-value>
<chart-value label="E">85</chart-value>
</chart-series>
</radar-chart>
Custom Grid Levels
Control the number of grid rings.
60
80
70
90
65
85
75
95
<radar-chart levels="3">
<chart-series color="#3b82f6">
<chart-value label="X">60</chart-value>
<chart-value label="Y">80</chart-value>
<chart-value label="Z">70</chart-value>
<chart-value label="W">90</chart-value>
</chart-series>
</radar-chart>
<radar-chart levels="10">
<chart-series color="#22c55e">
<chart-value label="X">65</chart-value>
<chart-value label="Y">85</chart-value>
<chart-value label="Z">75</chart-value>
<chart-value label="W">95</chart-value>
</chart-series>
</radar-chart>
Three-Axis Chart
Works with any number of axes (minimum 3). Great for RPG character stats.
90
80
50
70
40
70
60
30
95
<radar-chart>
<chart-series name="Warrior" color="#ef4444">
<chart-value label="Attack">90</chart-value>
<chart-value label="Defense">80</chart-value>
<chart-value label="Speed">50</chart-value>
</chart-series>
<chart-series name="Mage" color="#8b5cf6">
<chart-value label="Attack">70</chart-value>
<chart-value label="Defense">40</chart-value>
<chart-value label="Speed">70</chart-value>
</chart-series>
<chart-series name="Rogue" color="#22c55e">
<chart-value label="Attack">60</chart-value>
<chart-value label="Defense">30</chart-value>
<chart-value label="Speed">95</chart-value>
</chart-series>
</radar-chart>
Product Comparison
Compare products across multiple dimensions.
85
90
75
80
95
88
70
75
95
90
60
70
95
65
80
70
80
75
<radar-chart size="350">
<chart-series name="Product A" color="#3b82f6">
<chart-value label="Price">85</chart-value>
<chart-value label="Quality">90</chart-value>
<chart-value label="Design">75</chart-value>
<chart-value label="Features">80</chart-value>
<chart-value label="Support">95</chart-value>
<chart-value label="Performance">88</chart-value>
</chart-series>
<chart-series name="Product B" color="#f59e0b">
<chart-value label="Price">70</chart-value>
<chart-value label="Quality">75</chart-value>
<chart-value label="Design">95</chart-value>
<chart-value label="Features">90</chart-value>
<chart-value label="Support">60</chart-value>
<chart-value label="Performance">70</chart-value>
</chart-series>
<chart-series name="Product C" color="#22c55e">
<chart-value label="Price">95</chart-value>
<chart-value label="Quality">65</chart-value>
<chart-value label="Design">80</chart-value>
<chart-value label="Features">70</chart-value>
<chart-value label="Support">80</chart-value>
<chart-value label="Performance">75</chart-value>
</chart-series>
</radar-chart>