The <luna-radar-chart> component provides lightweight, dependency-free radar/spider charts with single and multi-series support.
Paths
/lunadom/components/radar-chart/radar-chart.js REQUIRED
Single Series
Multi-Series Comparison
Lockable Series
Click a data point or legend item to lock the highlight. Click again to unlock.
Custom Grid Rings
Fewer rings (2)
More rings (6)
Custom Theme
Purple Theme
Green Theme
No Background
Without Labels or Dots
Customization
Attributes
data - JSON array of axis descriptors (required)
series - JSON array for multi-series mode
title - Heading displayed above chart
max - Global maximum for normalization
rings - Number of grid rings (default: 4)
no-bg - Removes card background and padding
no-legend - Hides the legend
no-labels - Hides axis labels
no-title - Hides the title
no-dots - Hides data-point dots
filled - Force fills single-series shape
legend-layout - Legend direction (horizontal, vertical, default: "horizontal")
lockable - Click data point or legend to lock series highlight. Click again to unlock
CSS Variables
--luna-radar-size - Width and height of the SVG canvas (default: 220px)
--luna-radar-bg - Card background color
--luna-radar-border - Card border color
--luna-radar-radius - Card border radius
--luna-radar-fg - Primary text color
--luna-radar-muted - Axis label color
--luna-radar-grid - Grid ring/spoke color
--luna-radar-fill - Single-series shape fill
--luna-radar-stroke - Single-series shape stroke
--luna-radar-palette - Custom color palette (comma-separated)
Events
luna-point-enter - Fired when a data-point is hovered
luna-point-leave - Fired when hover leaves a data-point
Example Code
<!-- Single series -->
<luna-radar-chart
title="Skills Assessment"
data='[
{"label": "JavaScript", "value": 90},
{"label": "CSS", "value": 85},
{"label": "HTML", "value": 95}
]'
></luna-radar-chart>
<!-- Multi-series comparison -->
<luna-radar-chart
title="Team Performance"
data='[
{"label": "Speed"},
{"label": "Quality"},
{"label": "Communication"}
]'
series='[
{"label": "Team A", "color": "#2563eb", "data": [85, 90, 75]},
{"label": "Team B", "color": "#22c55e", "data": [90, 85, 95]}
]'
></luna-radar-chart>
<!-- Vertical legend -->
<luna-radar-chart
title="Comparison"
legend-layout="vertical"
data='[...]'
series='[...]'
></luna-radar-chart>
<!-- Lockable (click to lock series highlight) -->
<luna-radar-chart
title="Interactive Comparison"
lockable
data='[
{"label": "Speed"},
{"label": "Quality"},
{"label": "Design"}
]'
series='[
{"label": "Product A", "color": "#2563eb", "data": [90, 85, 80]},
{"label": "Product B", "color": "#22c55e", "data": [85, 90, 95]}
]'
></luna-radar-chart>
<!-- Custom grid rings -->
<luna-radar-chart
rings="6"
data='[...]'
></luna-radar-chart>
<!-- Custom theme -->
<luna-radar-chart
title="Custom"
data='[...]'
style="
--luna-radar-bg: #0a1a0f;
--luna-radar-stroke: #22c55e;
--luna-radar-fill: rgba(34, 197, 94, 0.2);
--luna-radar-size: 240px;
"
></luna-radar-chart>
<!-- No background -->
<luna-radar-chart
no-bg
data='[...]'
></luna-radar-chart>
<!-- Minimal (no labels or dots) -->
<luna-radar-chart
no-labels
no-dots
data='[...]'
></luna-radar-chart>
<!-- Dynamic data with JavaScript -->
<luna-radar-chart id="chart"></luna-radar-chart>
<script>
const chart = document.getElementById('chart');
// Set single-series data
chart.data = [
{label: 'Skill 1', value: 80},
{label: 'Skill 2', value: 90},
{label: 'Skill 3', value: 75}
];
// Set multi-series data
chart.data = [
{label: 'Metric 1'},
{label: 'Metric 2'},
{label: 'Metric 3'}
];
chart.series = [
{label: 'Series A', color: '#2563eb', data: [80, 90, 75]},
{label: 'Series B', color: '#22c55e', data: [85, 85, 80]}
];
// Listen to events
chart.addEventListener('luna-point-enter', (e) => {
console.log('Point:', e.detail.axisLabel, e.detail.value);
});
chart.addEventListener('luna-point-leave', () => {
console.log('Hover ended');
});
</script>