Radar Chart

<wa-radar-chart label="Employee Skills" description="A radar chart comparing skill levels across six categories">
  <script type="application/json">
    {
      "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>
</wa-radar-chart>

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

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

<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: 'Nimbus', data: [85, 90, 75, 80, 70, 88] },
        { label: 'Atlas', data: [70, 80, 90, 85, 92, 75] },
      ],
    },
  };
</script>

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

<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: ['Courage', 'Wisdom', 'Stealth', 'Cooking', 'Second Breakfast'],
      datasets: [
        { label: 'Frodo', data: [82, 78, 85, 45, 70] },
        { label: 'Samwise', data: [92, 65, 55, 95, 90] },
      ],
    },
  };
</script>

<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: ['Aroma', 'Body', 'Acidity', 'Sweetness', 'Aftertaste'],
      datasets: [
        {
          label: 'Morning Roast',
          data: [85, 70, 60, 78, 82],
        },
      ],
    },
  };
</script>

<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: ['Protein', 'Fiber', 'Vitamin C', 'Calcium', 'Iron'],
      datasets: [
        {
          label: 'Berry Smoothie',
          data: [55, 80, 95, 60, 70],
        },
      ],
    },
  };
</script>

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

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

  chart.config = {
    data: {
      labels: ['Performance', 'Battery', 'Display', 'Portability', 'Value'],
      datasets: [
        {
          label: 'Ultrabook 14',
          data: [80, 90, 75, 95, 70],
        },
      ],
    },
  };
</script>