Radar chart

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

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

Quarterly revenue

$4.1M

+18.6% from last year

Quarter	This year	Last year
Q1	$820K	$700K
Q2	$940K	$780K
Q3	$1080K	$860K
Q4	$1260K	$960K

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

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