# Radar Chart

A radar chart for comparing several variables on radial axes.

Ships in the separate, optional poetry-charts gem.

## Default

```erb
<% data = [
     { month: "January", desktop: 186 },
     { month: "February", desktop: 305 },
     { month: "March", desktop: 237 },
     { month: "April", desktop: 73 },
     { month: "May", desktop: 209 },
     { month: "June", desktop: 214 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-default") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid %>
    <% chart.with_radar(data_key: :desktop) %>
    <% chart.with_tooltip(indicator: :line) %>
  <% end %>
</div>
```

## Dots

```erb
<%# dots: true marks every vertex (r 4, solid). %>
<% data = [
     { month: "January", desktop: 186 },
     { month: "February", desktop: 305 },
     { month: "March", desktop: 237 },
     { month: "April", desktop: 73 },
     { month: "May", desktop: 209 },
     { month: "June", desktop: 214 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-dots") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid %>
    <% chart.with_radar(data_key: :desktop, dots: true) %>
  <% end %>
</div>
```

## Grid circle

```erb
<%# type: :circle swaps the polygon rings for circles. %>
<% data = [
     { month: "January", desktop: 186 },
     { month: "February", desktop: 305 },
     { month: "March", desktop: 237 },
     { month: "April", desktop: 73 },
     { month: "May", desktop: 209 },
     { month: "June", desktop: 214 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-grid-circle") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid(type: :circle) %>
    <% chart.with_radar(data_key: :desktop, dots: true) %>
  <% end %>
</div>
```

## Grid fill

```erb
<%# fill: :desktop tints the grid disc with that series' color (opacity 0.2). %>
<% data = [
     { month: "January", desktop: 186 },
     { month: "February", desktop: 305 },
     { month: "March", desktop: 237 },
     { month: "April", desktop: 73 },
     { month: "May", desktop: 209 },
     { month: "June", desktop: 214 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-grid-fill") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid(fill: :desktop) %>
    <% chart.with_radar(data_key: :desktop) %>
  <% end %>
</div>
```

## Grid none

```erb
<%# No with_grid slot: just the angle axis labels and the shape. %>
<% data = [
     { month: "January", desktop: 186 },
     { month: "February", desktop: 305 },
     { month: "March", desktop: 237 },
     { month: "April", desktop: 73 },
     { month: "May", desktop: 209 },
     { month: "June", desktop: 214 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-grid-none") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_radar(data_key: :desktop, dots: true) %>
  <% end %>
</div>
```

## Legend

```erb
<% data = [
     { month: "January", desktop: 186, mobile: 80 },
     { month: "February", desktop: 305, mobile: 200 },
     { month: "March", desktop: 237, mobile: 120 },
     { month: "April", desktop: 73, mobile: 190 },
     { month: "May", desktop: 209, mobile: 130 },
     { month: "June", desktop: 214, mobile: 140 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" },
              mobile: { label: "Mobile", color: "var(--chart-2)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-legend") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid %>
    <% chart.with_radar(data_key: :desktop) %>
    <% chart.with_radar(data_key: :mobile, fill_opacity: 1) %>
    <% chart.with_legend %>
  <% end %>
</div>
```

## Lines only

```erb
<%# Lines only: fill_opacity: 0 drops the area, stroke_width: 2 keeps the
    outline readable; radial_lines: false hides the grid spokes. %>
<% data = [
     { month: "January", desktop: 186, mobile: 80 },
     { month: "February", desktop: 305, mobile: 200 },
     { month: "March", desktop: 237, mobile: 120 },
     { month: "April", desktop: 73, mobile: 190 },
     { month: "May", desktop: 209, mobile: 130 },
     { month: "June", desktop: 214, mobile: 140 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" },
              mobile: { label: "Mobile", color: "var(--chart-2)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-lines-only") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid(radial_lines: false) %>
    <% chart.with_radar(data_key: :desktop, fill_opacity: 0, stroke_width: 2) %>
    <% chart.with_radar(data_key: :mobile, fill_opacity: 0, stroke_width: 2) %>
  <% end %>
</div>
```

## Multiple

```erb
<% data = [
     { month: "January", desktop: 186, mobile: 80 },
     { month: "February", desktop: 305, mobile: 200 },
     { month: "March", desktop: 237, mobile: 120 },
     { month: "April", desktop: 73, mobile: 190 },
     { month: "May", desktop: 209, mobile: 130 },
     { month: "June", desktop: 214, mobile: 140 }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" },
              mobile: { label: "Mobile", color: "var(--chart-2)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radar, data: data, config: config, id: "radar-multiple") do |chart| %>
    <% chart.with_angle_axis(data_key: :month) %>
    <% chart.with_grid %>
    <% chart.with_radar(data_key: :desktop) %>
    <%# Only the first series is translucent (0.6); the second stays opaque. %>
    <% chart.with_radar(data_key: :mobile, fill_opacity: 1) %>
  <% end %>
</div>
```