Doughnut Chart

<wa-doughnut-chart id="doughnut-hero" label="Project Time Allocation" description="A doughnut chart showing how project time is distributed across activities">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-hero');

  chart.config = {
    data: {
      labels: ['Development', 'Design', 'Testing', 'Meetings', 'Planning'],
      datasets: [{
        label: 'Hours',
        data: [35, 20, 15, 18, 12]
      }]
    }
  };
</script>

<wa-doughnut-chart id="doughnut-js-example" label="Revenue by Region" description="A doughnut chart of revenue by region">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-js-example');

  chart.config = {
    data: {
      labels: ['North America', 'Europe', 'Asia', 'Other'],
      datasets: [{
        label: 'Revenue',
        data: [42, 28, 22, 8]
      }]
    }
  };
</script>

<wa-doughnut-chart label="Revenue by Region" description="A doughnut chart showing revenue distribution across regions">
  <script type="application/json">
    {
      "data": {
        "labels": ["North America", "Europe", "Asia", "Other"],
        "datasets": [{
          "label": "Revenue",
          "data": [42, 28, 22, 8]
        }]
      }
    }
  </script>
</wa-doughnut-chart>

<wa-doughnut-chart
  id="doughnut-colors"
  label="Custom Colors"
  description="A doughnut chart with custom slice colors"
  style="
    --fill-color-1: color-mix(in srgb, var(--wa-color-purple-60) 70%, transparent);
    --border-color-1: var(--wa-color-purple-60);
    --fill-color-2: color-mix(in srgb, var(--wa-color-orange-60) 70%, transparent);
    --border-color-2: var(--wa-color-orange-60);
    --fill-color-3: color-mix(in srgb, var(--wa-color-cyan-60) 70%, transparent);
    --border-color-3: var(--wa-color-cyan-60);
  "
>
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-colors');

  chart.config = {
    data: {
      labels: ['Completed', 'In Progress', 'Pending'],
      datasets: [{
        label: 'Tasks',
        data: [45, 30, 25]
      }]
    }
  };
</script>

<wa-doughnut-chart id="doughnut-cutout-example" label="Thin Ring" description="A doughnut chart with a larger center cutout">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-cutout-example');

  chart.config = {
    data: {
      labels: ['Used', 'Available'],
      datasets: [{
        label: 'Storage',
        data: [72, 28]
      }]
    },
    options: {
      cutout: '75%'
    }
  };
</script>

<wa-doughnut-chart id="doughnut-legend" legend-position="bottom" label="Legend at Bottom" description="A doughnut chart with the legend at the bottom">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-legend');

  chart.config = {
    data: {
      labels: ['Email', 'Social', 'Direct', 'Referral'],
      datasets: [{
        label: 'Traffic Source',
        data: [30, 25, 28, 17]
      }]
    }
  };
</script>

<wa-doughnut-chart id="doughnut-tooltip" without-tooltip label="No Tooltips" description="A doughnut chart with tooltips disabled">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-tooltip');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        label: 'Values',
        data: [50, 30, 20]
      }]
    }
  };
</script>

<wa-doughnut-chart id="doughnut-anim" without-animation label="No Animation" description="A doughnut chart with animation disabled">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-anim');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        label: 'Values',
        data: [50, 30, 20]
      }]
    }
  };
</script>