Polar Area Chart

<wa-polar-area-chart> Since 3.3 Experimental Pro Polar-area-chart requires access to Web Awesome Pro

Polar area charts compare values using segments that radiate from a center point with varying radius. Unlike pie charts, each segment has an equal angle while the radius varies, making them useful for comparing magnitudes without visual bias. 

<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>

For advanced configuration such as custom plugins and direct Chart.js access, see <wa-chart>.

Examples

Providing Data with JavaScript

For dynamic data, set the config property directly. The chart will re-render automatically.

<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>

Note that config is shallowly reactive. If you mutate the existing object in place, you must reassign it to trigger a re-render!

Providing Data with JSON

Place a <script type="application/json"> tag inside the component with your chart data. Each value in the data array corresponds to a label, and the segment radius reflects its magnitude.

<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>

Custom Colors

Override the default color palette using the --fill-color-* and --border-color-* CSS custom properties.

<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>

Legend

Use the legend-position attribute to control where the legend appears. Add without-legend to hide it entirely.

<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>

Disabling Tooltips

Use the without-tooltip attribute to hide the tooltips that appear when hovering over segments.

<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>

Disabling Animations

Use the without-animation attribute to disable chart transitions.

<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>

Importing

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/polar-area-chart/polar-area-chart.js';

To manually import this component from React, use the following code. 

import WaPolarAreaChart from '@awesome.me/webawesome/dist/react/polar-area-chart';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS custom properties

Learn more about CSS custom properties.

Need a hand? Report a bug Ask for help
    No results
    Navigate Enter Select Esc Close