LayoutUI
Theme Presets
Browse Components

Radar

Compare profiles across a common scale.

Basic

Hover, tap or focus a mark to inspect exact values. Arrow keys move between observations.

Product capabilities
Product capabilities — example data
ObservationCurrentGoal
Speed7290
Quality8595
Coverage6085
Support7890
Value8895
View Code
HTML
<figure class="chart" data-chart="radar" data-chart-max="100">
  <figcaption>
    Product capabilities
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Product capabilities — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Observation
          </th>
          <th scope="col">
            Current
          </th>
          <th scope="col">
            Goal
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Speed
          </th>
          <td>
            72
          </td>
          <td>
            90
          </td>
        </tr>
        <tr>
          <th scope="row">
            Quality
          </th>
          <td>
            85
          </td>
          <td>
            95
          </td>
        </tr>
        <tr>
          <th scope="row">
            Coverage
          </th>
          <td>
            60
          </td>
          <td>
            85
          </td>
        </tr>
        <tr>
          <th scope="row">
            Support
          </th>
          <td>
            78
          </td>
          <td>
            90
          </td>
        </tr>
        <tr>
          <th scope="row">
            Value
          </th>
          <td>
            88
          </td>
          <td>
            95
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Right-to-left

Labels follow the reading direction. Numeric and radial axes keep their established orientation.

Product capabilities
Product capabilities — example data
ObservationCurrentGoal
Speed7290
Quality8595
Coverage6085
Support7890
Value8895
View Code
HTML
<figure class="chart" dir="rtl" data-chart="radar" data-chart-max="100">
  <figcaption>
    Product capabilities
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Product capabilities — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Observation
          </th>
          <th scope="col">
            Current
          </th>
          <th scope="col">
            Goal
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Speed
          </th>
          <td>
            72
          </td>
          <td>
            90
          </td>
        </tr>
        <tr>
          <th scope="row">
            Quality
          </th>
          <td>
            85
          </td>
          <td>
            95
          </td>
        </tr>
        <tr>
          <th scope="row">
            Coverage
          </th>
          <td>
            60
          </td>
          <td>
            85
          </td>
        </tr>
        <tr>
          <th scope="row">
            Support
          </th>
          <td>
            78
          </td>
          <td>
            90
          </td>
        </tr>
        <tr>
          <th scope="row">
            Value
          </th>
          <td>
            88
          </td>
          <td>
            95
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Empty data

The chart keeps its reserved space without inventing observations.

Product capabilities
Product capabilities — example data
ObservationCurrentGoal
View Code
HTML
<figure
  class="chart"
  data-chart-labels="[&quot;Speed&quot;, &quot;Quality&quot;, &quot;Coverage&quot;, &quot;Support&quot;, &quot;Value&quot;]"
  data-chart="radar"
  data-chart-max="100"
>
  <figcaption>
    Product capabilities
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Product capabilities — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Observation
          </th>
          <th scope="col">
            Current
          </th>
          <th scope="col">
            Goal
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</figure>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.csschart-core.csschart-plots.cssradar-chart.csschart-core.jschart-plots.jsradar-chart.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/chart-core.css">
<link rel="stylesheet" href="/library/assets/chart-plots.css">
<link rel="stylesheet" href="/library/assets/radar-chart.css">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/chart-plots.js"></script>
<script defer src="/library/assets/radar-chart.js"></script>

12,194 bytes CSS including base · 16,825 bytes runtime JavaScript

Usage

Data format

Three to eight categories and up to four nonnegative series. All axes share a scale from zero to the largest value; data-chart-max can set a fixed maximum at least as large as every value. Use comparable units across axes. Clockwise category order stays fixed in RTL.

Shared interactions

Hover, tap or focus a mark to inspect its exact value. Arrow keys, Home and End move between marks; Escape dismisses the tooltip. The source table remains available without JavaScript. Enhanced charts expose exact values through accessible marks and tooltips.

Lifecycle and themes

Load Chart Core, Chart Plots and this component module. Theme tokens supply colors in light and dark modes. Use layoutCharts.refresh(root) after changing the table and destroy(root) before unmounting. Wide charts scroll within their frame.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.