Polar Area Chart

<wa-polar-area-chart label="Monthly Rainfall" description="A polar area chart showing monthly rainfall in millimeters">
  <script type="application/json">
    {
      "data": {
        "labels": ["January", "February", "March", "April", "May", "June"],
        "datasets": [{ "label": "Rainfall (mm)", "data": [78, 62, 85, 110, 95, 45] }]
      }
    }
  </script>
</wa-polar-area-chart>

<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-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
  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: 'Wind Speed (km/h)',
          data: [22, 14, 31, 18],
        },
      ],
    },
  };
</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-disabled"
  without-tooltip
  without-animation
  label="Minimal"
  description="A polar area chart with tooltips and animations disabled"
>
</wa-polar-area-chart>
<script type="module">
  const chart = document.querySelector('#polar-disabled');

  chart.config = {
    data: {
      labels: ['Jupiter', 'Saturn', 'Uranus', 'Neptune'],
      datasets: [
        {
          label: 'Known Moons',
          data: [95, 146, 28, 16],
        },
      ],
    },
  };
</script>