The <luna-pie-chart> component provides lightweight, dependency-free pie and donut charts with automatic legends and hover interactions.
Paths
/lunadom/components/pie-chart/pie-chart.js REQUIRED
Basic Pie Chart
Layout Variants
Standard (Vertical Legend)
Donut Chart
No Background (Just Chart)
Horizontal Legend
Custom Palette
Define your own color palette with CSS custom properties.
Customization
Attributes
data - JSON array of data items (required)
title - Heading displayed above chart
donut - Renders as donut chart
donut-label - Static label in donut center (default: "total")
no-bg - Removes card background and padding
no-legend - Hides the legend
no-title - Hides the title
legend-layout - Legend direction (horizontal, vertical, default: "vertical")
CSS Variables
--luna-pie-size - Chart diameter (default: 180px)
--luna-pie-bg - Card background
--luna-pie-border - Card border color
--luna-pie-fg - Primary text color
--luna-pie-muted - Secondary text color
--luna-pie-radius - Card border radius
--luna-pie-padding - Card inner padding
--luna-pie-gap - Gap between chart and legend
--luna-pie-palette - Custom color palette (comma-separated)
Events
luna-slice-enter - Fired when a slice is hovered/focused
luna-slice-leave - Fired when hover/focus leaves a slice
Example Code
<!-- Basic pie chart -->
<luna-pie-chart
title="Browser Usage"
data='[
{"label": "Chrome", "value": 45},
{"label": "Firefox", "value": 25},
{"label": "Safari", "value": 18}
]'
></luna-pie-chart>
<!-- Donut chart -->
<luna-pie-chart
title="Market Share"
donut
donut-label="companies"
data='[
{"label": "Company A", "value": 42},
{"label": "Company B", "value": 28}
]'
></luna-pie-chart>
<!-- Horizontal legend -->
<luna-pie-chart
title="Traffic Sources"
legend-layout="horizontal"
data='[...]'
></luna-pie-chart>
<!-- Per-item colors -->
<luna-pie-chart
title="Status"
data='[
{"label": "Complete", "value": 45, "color": "#22c55e"},
{"label": "Pending", "value": 28, "color": "#f59e0b"}
]'
></luna-pie-chart>
<!-- Custom theme -->
<luna-pie-chart
title="Sales"
data='[...]'
style="
--luna-pie-bg: #0a1a0f;
--luna-pie-border: #1a3322;
--luna-pie-fg: #d1fae5;
--luna-pie-size: 200px;
"
></luna-pie-chart>
<!-- Custom palette -->
<luna-pie-chart
data='[...]'
style="--luna-pie-palette: #ff6b6b, #4ecdc4, #45b7d1;"
></luna-pie-chart>
<!-- No background (embedded) -->
<luna-pie-chart
title="Devices"
no-bg
data='[...]'
></luna-pie-chart>
<!-- Dynamic data with JavaScript -->
<luna-pie-chart id="chart"></luna-pie-chart>
<script>
const chart = document.getElementById('chart');
// Set data via property
chart.data = [
{label: 'Item 1', value: 30},
{label: 'Item 2', value: 50},
{label: 'Item 3', value: 20}
];
// Or via attribute
chart.setAttribute('data', JSON.stringify([
{label: 'A', value: 10},
{label: 'B', value: 20}
]));
// Listen to events
chart.addEventListener('luna-slice-enter', (e) => {
console.log('Hovered:', e.detail.label, e.detail.percent + '%');
});
chart.addEventListener('luna-slice-leave', () => {
console.log('Hover ended');
});
</script>