PieChart Web Component

A D3-powered pie chart component with support for explicit data attributes or automatic DOM class counting.

Basic Usage

Simple Pie Chart

<pie-chart
  data="35,25,20,12,8"
  labels="Research,Development,Marketing,Operations,Other"
  title="Budget Allocation"
  legend
  legend-values>
</pie-chart>

Donut Chart with Animation

<pie-chart
  data="40,30,20,10"
  labels="Q1,Q2,Q3,Q4"
  inner-radius="0.5"
  legend
  legend-position="bottom"
  show-percent
  animate>
</pie-chart>

Note: Legend shows labels only (no legend-values attribute)

Custom Colors

Custom Color Palette

<pie-chart
  data="30,25,25,20"
  labels="Alpha,Beta,Gamma,Delta"
  colors="#264653,#2a9d8f,#e9c46a,#f4a261"
  legend>
</pie-chart>

Legend Positions

<pie-chart
  legend-position="left"
  legend-width="100px"
  show-values>
</pie-chart>

DOM Class Counting

The chart can automatically count elements with specific classes in the DOM. Add the watch attribute to auto-update when the DOM changes.

Live Task Tracker

<pie-chart
  count-classes="completed,pending,failed"
  labels="Completed,Pending,Failed"
  colors="#4a6b5a,#b8a060,#8b4a4a"
  watch>
</pie-chart>

Event Handling

Ready — Click or hover on slices
<pie-chart id="chart"></pie-chart>
<script>
  chart.addEventListener('slice-click', (e) => {
    console.log('Clicked:', e.detail);
  });
  chart.addEventListener('slice-hover', (e) => {
    console.log('Hovering:', e.detail);
  });
</script>

Programmatic API

Dynamic Data Updates

// Set data programmatically
chart.setData([
  { label: 'A', value: 30 },
  { label: 'B', value: 45 },
  { label: 'C', value: 25 }
]);

// Get current data
console.log(chart.getData());

// Refresh (re-count if using classes)
chart.refresh();