Doughnut Chart

<wa-doughnut-chart
  label="Project Time Allocation"
  description="A doughnut chart showing how project time is distributed across activities"
>
  <script type="application/json">
    {
      "data": {
        "labels": ["Development", "Design", "Testing", "Meetings", "Planning"],
        "datasets": [{ "label": "Hours", "data": [35, 20, 15, 18, 12] }]
      }
    }
  </script>
</wa-doughnut-chart>

<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-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
  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-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-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-disabled"
  without-tooltip
  without-animation
  label="Minimal"
  description="A doughnut chart with tooltips and animations disabled"
>
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-disabled');

  chart.config = {
    data: {
      labels: ['Glazed', 'Old Fashioned', 'Boston Cream'],
      datasets: [
        {
          label: 'Donuts Sold',
          data: [520, 310, 190],
        },
      ],
    },
  };
</script>