Pie Chart

<wa-pie-chart
  label="Browser Market Share"
  description="A pie chart showing browser market share with Chrome leading at 65%"
>
  <script type="application/json">
    {
      "data": {
        "labels": ["Chrome", "Safari", "Firefox", "Edge", "Other"],
        "datasets": [{ "label": "Market Share", "data": [65, 18, 8, 5, 4] }]
      }
    }
  </script>
</wa-pie-chart>

<wa-pie-chart label="Budget Allocation" description="A pie chart showing how a budget is allocated across departments">
  <script type="application/json">
    {
      "data": {
        "labels": ["Engineering", "Marketing", "Sales", "Operations"],
        "datasets": [
          {
            "label": "Budget",
            "data": [40, 25, 20, 15]
          }
        ]
      }
    }
  </script>
</wa-pie-chart>

<wa-pie-chart id="pie-js-example" label="Budget Allocation" description="A pie chart of budget allocation">
</wa-pie-chart>
<script type="module">
  const chart = document.querySelector('#pie-js-example');

  chart.config = {
    data: {
      labels: ['Engineering', 'Marketing', 'Sales', 'Operations'],
      datasets: [
        {
          label: 'Budget',
          data: [40, 25, 20, 15],
        },
      ],
    },
  };
</script>

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

  chart.config = {
    data: {
      labels: ['Desktop', 'Mobile', 'Tablet'],
      datasets: [
        {
          label: 'Traffic',
          data: [55, 35, 10],
        },
      ],
    },
  };
</script>

<wa-pie-chart
  id="pie-legend"
  legend-position="right"
  label="Legend on Right"
  description="A pie chart with the legend on the right side"
>
</wa-pie-chart>
<script type="module">
  const chart = document.querySelector('#pie-legend');

  chart.config = {
    data: {
      labels: ['Rent', 'Food', 'Transport', 'Entertainment', 'Savings'],
      datasets: [
        {
          label: 'Monthly Spending',
          data: [35, 25, 15, 10, 15],
        },
      ],
    },
  };
</script>

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

  chart.config = {
    data: {
      labels: ['Latte', 'Cold Brew', 'Espresso'],
      datasets: [
        {
          label: 'Daily Orders',
          data: [52, 30, 18],
        },
      ],
    },
  };
</script>