Radar Chart

<wa-radar-chart> Stable Since 3.3 Pro Included with Web Awesome Pro

Radar charts compare multiple variables at once by plotting data on a radial grid. They are well-suited for comparing profiles across several dimensions, such as skill assessments, product attributes, or performance metrics.

Get Radar Chart with Web Awesome Pro! Subscribing to Web Awesome Pro gives you every Pro component, plus premium themes, color tools, team collaboration, and more. 
<wa-radar-chart id="radar-hero" label="Employee Skills" description="A radar chart comparing skill levels across six categories">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-hero');

  chart.config = {
    data: {
      labels: ['Communication', 'Technical', 'Leadership', 'Creativity', 'Teamwork', 'Problem Solving'],
      datasets: [{
        label: 'Alice',
        data: [85, 92, 70, 88, 95, 78],
        fill: true,
        backgroundColor: 'color-mix(in srgb, var(--wa-color-red-60) 20%, transparent)',
        borderColor: 'var(--wa-color-red-60)'
      }, {
        label: 'Bob',
        data: [72, 78, 90, 65, 80, 88],
        fill: true,
        backgroundColor: 'color-mix(in srgb, var(--wa-color-blue-60) 20%, transparent)',
        borderColor: 'var(--wa-color-blue-60)'
      }]
    }
  };
</script>

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

Examples

Link to This Section

Providing Data with JavaScript

Link to This Section

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

<wa-radar-chart id="radar-js-example" label="Feature Comparison" description="A radar chart comparing product features">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-js-example');

  chart.config = {
    data: {
      labels: ['Speed', 'Reliability', 'Ease of Use', 'Features', 'Support'],
      datasets: [{
        label: 'Product A',
        data: [85, 90, 75, 80, 70]
      }]
    }
  };
</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

Link to This Section

Place a <script type="application/json"> tag inside the component with your chart data. Each value in the data array maps to a label on the radial axis.

<wa-radar-chart label="Feature Comparison" description="A radar chart comparing features of a product across five dimensions">
  <script type="application/json">
    {
      "data": {
        "labels": ["Speed", "Reliability", "Ease of Use", "Features", "Support"],
        "datasets": [{
          "label": "Product A",
          "data": [85, 90, 75, 80, 70]
        }]
      }
    }
  </script>
</wa-radar-chart>

Multiple Datasets

Link to This Section

Add multiple datasets to overlay profiles for direct comparison.

<wa-radar-chart id="radar-multi" label="Product Comparison" description="A radar chart comparing two products across several dimensions">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-multi');

  chart.config = {
    data: {
      labels: ['Speed', 'Reliability', 'Ease of Use', 'Features', 'Support', 'Value'],
      datasets: [
        { label: 'Product A', data: [85, 90, 75, 80, 70, 88] },
        { label: 'Product B', data: [70, 80, 90, 85, 92, 75] }
      ]
    }
  };
</script>

Custom Colors

Link to This Section

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

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

  chart.config = {
    data: {
      labels: ['Offense', 'Defense', 'Speed', 'Stamina', 'Technique'],
      datasets: [
        { label: 'Player A', data: [90, 65, 80, 75, 85] },
        { label: 'Player B', data: [70, 88, 92, 80, 72] }
      ]
    }
  };
</script>

Border Width

Link to This Section

Use the --line-border-width CSS custom property to control the thickness of the radar lines.

<wa-radar-chart id="radar-border" style="--line-border-width: 4px" label="Thick Lines" description="A radar chart with thicker lines">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-border');

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

Point Radius

Link to This Section

Use the --point-radius CSS custom property to control the size of the dots drawn at each vertex. Set it to 0 to hide them entirely.

<wa-radar-chart id="radar-points" style="--point-radius: 6px" label="Large Points" description="A radar chart with larger vertex dots">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-points');

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

Filled Areas

Link to This Section

Set fill to true on each dataset to fill the area under the radar lines. This makes it easier to see the overall shape and overlap of each profile.

<wa-radar-chart id="radar-filled" label="Team Assessment" description="A filled radar chart comparing two team members across skill areas">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-filled');

  chart.config = {
    data: {
      labels: ['Frontend', 'Backend', 'DevOps', 'Testing', 'Design', 'Communication'],
      datasets: [
        {
          label: 'Alice',
          data: [90, 75, 60, 80, 85, 92],
          fill: true,
          backgroundColor: 'color-mix(in srgb, var(--wa-color-red-60) 20%, transparent)',
          borderColor: 'var(--wa-color-red-60)'
        },
        {
          label: 'Bob',
          data: [70, 92, 85, 88, 60, 78],
          fill: true,
          backgroundColor: 'color-mix(in srgb, var(--wa-color-blue-60) 20%, transparent)',
          borderColor: 'var(--wa-color-blue-60)'
        }
      ]
    }
  };
</script>

Legend

Link to This Section

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

<wa-radar-chart id="radar-legend" legend-position="bottom" label="Legend at Bottom" description="A radar chart with the legend at the bottom">
</wa-radar-chart>
<script type="module">
  const chart = document.querySelector('#radar-legend');

  chart.config = {
    data: {
      labels: ['Strength', 'Agility', 'Intelligence', 'Wisdom', 'Charisma'],
      datasets: [
        { label: 'Warrior', data: [95, 70, 50, 60, 65] },
        { label: 'Mage', data: [40, 55, 95, 90, 70] }
      ]
    }
  };
</script>

Disabling Tooltips

Link to This Section

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

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

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

Disabling Animations

Link to This Section

Use the without-animation attribute to disable chart transitions.

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

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

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN npm Self-Hosted React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/radar-chart/radar-chart.js';

After installing Web Awesome via npm, import this component:

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

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/radar-chart/radar-chart.js';

To import this component for React 18 or below, use the following code:

import WaRadarChart from '@awesome.me/webawesome/dist/react/radar-chart/index.js';

Slots

Link to This Section

Learn more about using slots.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

CSS custom properties

Link to This Section

Learn more about CSS custom properties.

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