Polar Area Chart

<wa-polar-area-chart id="polar-hero" label="Monthly Rainfall" description="A polar area chart showing monthly rainfall in millimeters">
</wa-polar-area-chart>
<script type="module">
  const chart = document.querySelector('#polar-hero');

  chart.config = {
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June'],
      datasets: [{
        label: 'Rainfall (mm)',
        data: [78, 62, 85, 110, 95, 45]
      }]
    }
  };
</script>

<wa-polar-area-chart id="polar-js-example" label="Energy Production" description="A polar area chart of energy output">
</wa-polar-area-chart>
<script type="module">
  const chart = document.querySelector('#polar-js-example');

  chart.config = {
    data: {
      labels: ['Solar', 'Wind', 'Hydro', 'Nuclear', 'Natural Gas'],
      datasets: [{
        label: 'Output (GW)',
        data: [85, 72, 110, 95, 130]
      }]
    }
  };
</script>

<wa-polar-area-chart label="Energy Production" description="A polar area chart showing energy production by source in gigawatts">
  <script type="application/json">
    {
      "data": {
        "labels": ["Solar", "Wind", "Hydro", "Nuclear", "Natural Gas"],
        "datasets": [{
          "label": "Output (GW)",
          "data": [85, 72, 110, 95, 130]
        }]
      }
    }
  </script>
</wa-polar-area-chart>

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

  chart.config = {
    data: {
      labels: ['North', 'South', 'East', 'West'],
      datasets: [{
        label: 'Sales',
        data: [85, 60, 92, 75]
      }]
    }
  };
</script>

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

  chart.config = {
    data: {
      labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
      datasets: [{
        label: 'Rating',
        data: [80, 90, 70, 95, 85]
      }]
    }
  };
</script>

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

  chart.config = {
    data: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [{
        label: 'Values',
        data: [40, 70, 55, 85]
      }]
    }
  };
</script>

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

  chart.config = {
    data: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [{
        label: 'Values',
        data: [40, 70, 55, 85]
      }]
    }
  };
</script>