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, positioned around the circle purely by its order (angle = row index ÷ 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, and it'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