# Radar chart

> Several measures on one scale drawn as shapes on spokes from a data table, one shape per series.

## Anatomy

A `<figure class="radar-chart">` draws a `<table>` of scores on spokes from a shared middle. Each row is a spoke and each value column is a shape joining its values.

It takes the same markup as a [line chart](line-chart.html). Spokes run clockwise from the top in table order, with each row's label past its tip. The middle is zero and the rim is the scale's top. A tooltip follows the pointer round the chart, and the arrow keys move it when the chart has focus. Radar charts suit five to eight measures on the same scale, such as skill scores. To compare exact values, or measures on different scales, use a [bar chart](bar-chart.html).

```
<figure class="radar-chart">
  <figcaption>Competitor benchmark</figcaption>
  <table>
    <thead>
      <tr><th>Measure</th><th>Score</th></tr>
    </thead>
    <tbody>
      <tr><th>Pricing</th><td>72</td></tr>
      <tr><th>Quality</th><td>90</td></tr>
      <tr><th>Speed</th><td>65</td></tr>
      <tr><th>Support</th><td>78</td></tr>
      <tr><th>Innovation</th><td>84</td></tr>
      <tr><th>Reach</th><td>58</td></tr>
    </tbody>
  </table>
</figure>
```

## Area and points

Add `area` to fill each shape and `points` to mark each value with a dot. They work alone or together.

```
<figure class="radar-chart area points">
  <figcaption>Team skills</figcaption>
  <table><!-- … --></table>
</figure>
```

## Several series

Each further column is another shape, in the next color, with a legend below the chart. Add `toggle` to the figure to make each legend item a button that shows or hides its series, as on the [line chart](line-chart.html#toggle). The tooltip lists every series for the spoke. Put `class="dashed"` on a header cell to dash that series' outline, for a target or an earlier period.

```
<figure class="radar-chart area">
  <figcaption>Client satisfaction</figcaption>
  <table>
    <thead>
      <tr><th>Measure</th><th>This quarter</th><th class="dashed">Last quarter</th></tr>
    </thead>
    <tbody>
      <tr><th>Communication</th><td>92</td><td>80</td></tr>
      <!-- One row per measure -->
    </tbody>
  </table>
</figure>
```

## Sparkline

`sparkline` is a 48px chart with no labels, legend or tooltip, for a shape beside a figure. Hide its caption with `visually-hidden` when the tile already names it.

```
<dl class="stats">
  <div>
    <dt>Quarterly revenue</dt>
    <dd>$4.1M</dd>
    <dd class="stat-change up">+18.6% from last year</dd>
    <dd>
      <figure class="radar-chart sparkline area my-0">
        <figcaption class="visually-hidden">Revenue by quarter</figcaption>
        <table><!-- … --></table>
      </figure>
    </dd>
  </div>
</dl>
```

## Chart cards

Put a chart in a card with the figures it explains. The card adds no chart styles. Size the chart with `--md-comp-radar-chart-height`, which sets the rim's diameter.

```
<article class="outlined">
  <div class="p-4">
    <dl class="stats my-0">
      <div>
        <dt>Team skill average</dt>
        <dd>78.8</dd>
        <dd class="stat-change up">+6.2% from last review</dd>
      </div>
    </dl>
    <figure class="radar-chart area points" style="--md-comp-radar-chart-height: 200px">
      <figcaption class="visually-hidden">Team skills across six capabilities</figcaption>
      <table><!-- … --></table>
    </figure>
  </div>
</article>
```

## Values and scale

Cells read as in a line chart. A cell's number is its `data-value`, or its text without currency signs, percent signs or grouping commas. The tooltip shows the cell's text as written. A cell that is not a number is a gap. The outline breaks there, as a line chart's does, and the tooltip leaves it out. With `area`, each unbroken run fills as a wedge from the middle, and a value between two gaps is a dot.

The middle is zero, or a little below the lowest value if one is negative. The rim is the highest value plus a tenth of the range. Set `data-min` and `data-max` on the figure for a fixed scale, such as `data-max="100"` for scores out of 100. Values past the rim stop at it. Series take `primary`, `tertiary`, `secondary` and `on-surface-variant` in turn.

Add `axis` to draw the grid rings at round values instead of quarters. It labels each ring up the top spoke and leaves zero in the middle unlabelled. The rim widens to the next round value unless `data-max` sets it. The labels are hidden from assistive technology. The table still carries the values.

```
<figure class="radar-chart axis">
  <figcaption>Competitor benchmark</figcaption>
  <table><!-- … --></table>
</figure>
```

## Accessibility

The table is the chart's text alternative. Give it a header row and a header cell per row, and name the chart with a `<figcaption>`. The drawn chart, labels and legend are hidden from assistive technology.

The plot is one Tab stop named by the caption. The arrow keys move round the spokes. Right and down go to the next row, and left and up go to the one before. Past the last row they go on to the first. Home and End jump to the first and last rows, and Escape hides the tooltip. On a touch screen, tap near a spoke to show it. In a right-to-left page the spokes still run clockwise, and so do the arrows. The tooltip is a polite live region, so a screen reader hears each row's values as it moves. A sparkline is not focusable. In forced colors the shapes keep their colors so the legend still keys them.

## JavaScript

`AutoInit()` starts every `.radar-chart`. To start one yourself, call `RadarChart.init`. After changing its table, call `update()` to redraw it in place, or put `data-watch` on the figure and it redraws itself. It has the line chart's options and methods.

```
const chart = Expressive.RadarChart.init(document.querySelector('.radar-chart'), { max: 100 });
chart.show(2);   // highlight the third row; -1 hides the tooltip
chart.update();  // redraw from the table; focus and the highlighted row stay
chart.destroy(); // remove the drawing and show the table again
```

## Tokens

Override these on the `.radar-chart`.

| Token | Default |
| --- | --- |
| `--md-comp-radar-chart-height` | 240px, the rim's diameter; 48px for a sparkline |
| `--md-comp-radar-chart-line-width` | 2px; 1.5px for a sparkline |
| `--md-comp-radar-chart-label-room` | 80px, the labels' width beside the rim |
| `--md-comp-radar-chart-grid-color` | `outline-variant` |
| `--md-comp-radar-chart-color-1` … `-4` | `primary`, `tertiary`, `secondary`, `on-surface-variant` |

For a selective Sass build, include `"radar-chart"` in `$components`.