mailinapp
Documentation menu

Radar block

A multi-axis comparison — up to 3 series plotted across a set of shared axes, drawn as an overlapping polygon (or "web") rather than bars or a line. It's the shape for comparing categories across several dimensions at once: a product scored on price, quality, speed, and support, or a plan tier stacked against another on the same set of criteria.

How it works

Each authored row is one axis. Its position around the circle comes purely from authoring order (angle equals row index divided by row count), never reordered or sorted by value. Up to 3 series plot their own value on every axis, sharing one 0..max scale: the same "one shared value axis" model the bar and line charts already use, just laid out radially instead of along a straight line. That's why a radar row-list reuses the exact same authoring columns as bar/line — a radar axis is data-model-identical to a bar-chart category.

A polygon needs at least 3 vertices to be a meaningful shape — 2 points draw a line, 1 point draws nothing — so radar is the one chart in this family with a floor as well as a ceiling. Fewer than 3 authored axes (including zero) renders the same "add more data" placeholder an empty chart gets elsewhere in the family. At the other end, radar is capped at 8 axes; past that, spokes crowd together and axis labels start overlapping, the same "too many marks" ceiling every other chart type in this family enforces at 8 categories/slices/series.

The always-visible data table beneath the image lists every axis as a row, with one column per active series — the same category × series shape the bar and line chart tables already use. A legend only appears once 2 or more series are in play; a single series' identity is already named by the block's own title, the same convention bar/line charts follow.

Series identity comes from whether you've given it a name. Series 1 always renders, falling back to the block's own title if left unnamed, while series 2 and 3 only appear once you type a name into their label field. A half-filled value column with no series name never surfaces as an unlabeled ghost series.

Configurable fields:

  • Chart title — optional heading text above the chart.
  • Data (at least 3 rows) — the row-list: an axis Category label plus up to 3 numeric series values per row.
  • Series 1/2/3 name and Series 1/2/3 color — series 1 renders unconditionally; series 2 and 3 only render once named.
  • Background color, padding, border and border radius on the card.
  • Title color/size and legend color/size — text styling for the heading and the legend/table text beneath the image.

Examples

Comparing two product tiers across shared criteria — price, feature depth, support responsiveness, ease of setup — as two overlapping series on one radar gives a sales or marketing email a single visual instead of a feature-comparison table. An internal ops recap can score several vendors or contractors across the same rubric (cost, quality, reliability, communication) to justify a renewal decision at a glance. A product team running a customer survey with several rated dimensions (usability, value, support, reliability, design) can chart the average score per dimension as one series, with a prior quarter's scores as a second series to show movement.

What the static fallback looks like

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Vendor scorecard</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="360" height="360"
       alt="Radar chart: Speed (Vendor A 8); Reliability (Vendor A 6); Design (Vendor A 9); Price (Vendor A 5); Support (Vendor A 7)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Vendor A</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Speed</td>
      <td style="padding:4px 8px">8</td>
    </tr>
  </table>
</div>

With only one named series, the legend is omitted (the title already names it), but the data table still lists every axis and value.

Related