# Radial Bar Chart

A radial bar chart with bars wrapped around a circular axis.

Ships in the separate, optional poetry-charts gem.

## Default

```erb
<%# One angular bar per browser row over a muted background track -
    the shadcn "simple" radial block. %>
<% config = {
     visitors: { label: "Visitors" },
     chrome: { label: "Chrome", color: "var(--chart-1)" },
     safari: { label: "Safari", color: "var(--chart-2)" },
     firefox: { label: "Firefox", color: "var(--chart-3)" },
     edge: { label: "Edge", color: "var(--chart-4)" },
     other: { label: "Other", color: "var(--chart-5)" }
   }
   data = [
     { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
     { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
     { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
     { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
     { browser: "other", visitors: 90, fill: "var(--color-other)" }
   ] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-default",
                   name_key: :browser, inner_radius: 30, outer_radius: 110) do |chart| %>
    <% chart.with_radial_bar(data_key: :visitors, background: true) %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Grid

```erb
<%# Polar-grid circles mark every ring boundary - the shadcn "grid"
    radial block. %>
<% config = {
     visitors: { label: "Visitors" },
     chrome: { label: "Chrome", color: "var(--chart-1)" },
     safari: { label: "Safari", color: "var(--chart-2)" },
     firefox: { label: "Firefox", color: "var(--chart-3)" },
     edge: { label: "Edge", color: "var(--chart-4)" },
     other: { label: "Other", color: "var(--chart-5)" }
   }
   data = [
     { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
     { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
     { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
     { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
     { browser: "other", visitors: 90, fill: "var(--color-other)" }
   ] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-grid",
                   name_key: :browser, inner_radius: 30, outer_radius: 100) do |chart| %>
    <% chart.with_polar_grid %>
    <% chart.with_radial_bar(data_key: :visitors) %>
  <% end %>
</div>
```

## Label

```erb
<%# insideStart labels ride each arc a few degrees into the sweep;
    the -90..380 span is the shadcn "label" block's overshoot spiral. %>
<% config = {
     visitors: { label: "Visitors" },
     chrome: { label: "Chrome", color: "var(--chart-1)" },
     safari: { label: "Safari", color: "var(--chart-2)" },
     firefox: { label: "Firefox", color: "var(--chart-3)" },
     edge: { label: "Edge", color: "var(--chart-4)" },
     other: { label: "Other", color: "var(--chart-5)" }
   }
   data = [
     { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
     { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
     { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
     { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
     { browser: "other", visitors: 90, fill: "var(--color-other)" }
   ] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-label",
                   name_key: :browser, start_angle: -90, end_angle: 380,
                   inner_radius: 30, outer_radius: 110) do |chart| %>
    <% chart.with_radial_bar(data_key: :visitors, background: true,
                             labels: :inside_start, label_key: :browser) %>
  <% end %>
</div>
```

## Shape

```erb
<%# The gauge look: disc tracks from with_polar_grid(radii:, fills:) plus
    a center label - the shadcn "shape" radial block. %>
<% config = {
     visitors: { label: "Visitors" },
     safari: { label: "Safari", color: "var(--chart-2)" }
   }
   data = [{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" }] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-shape",
                   name_key: :browser, end_angle: 100,
                   inner_radius: 65, outer_radius: 95) do |chart| %>
    <% chart.with_polar_grid(radii: [86, 74], fills: %i[muted background]) %>
    <% chart.with_radial_bar(data_key: :visitors, background: true) %>
    <% chart.with_center_label(title: "1,260", subtitle: "Visitors") %>
  <% end %>
</div>
```

## Stacked

```erb
<%# Two series share the ring and stack along the ANGLE (stack: :a). The
    domain is [0, dataMax] over the raw values (recharts' default), so
    mobile fills 570/1260 = 81deg and desktop stacks on and clips at the
    180deg end - the shadcn "stacked" radial block. compact: the smaller
    center number that sits above the flat baseline. %>
<% config = {
     desktop: { label: "Desktop", color: "var(--chart-1)" },
     mobile: { label: "Mobile", color: "var(--chart-2)" }
   }
   data = [{ month: "january", desktop: 1260, mobile: 570 }] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-stacked",
                   name_key: :month, end_angle: 180,
                   inner_radius: 80, outer_radius: 110) do |chart| %>
    <% chart.with_radial_bar(data_key: :mobile, stack: :a, corner_radius: 5) %>
    <% chart.with_radial_bar(data_key: :desktop, stack: :a, corner_radius: 5) %>
    <% chart.with_center_label(title: "1,830", subtitle: "Visitors", compact: true) %>
  <% end %>
</div>
```

## Text

```erb
<%# A thin 250-degree gauge with pill caps (corner_radius: 10 on a 10px
    ring) and center text - the shadcn "text" radial block. %>
<% config = {
     visitors: { label: "Visitors" },
     safari: { label: "Safari", color: "var(--chart-2)" }
   }
   data = [{ browser: "safari", visitors: 200, fill: "var(--color-safari)" }] %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:radial, data: data, config: config, id: "radial-text",
                   name_key: :browser, start_angle: 0, end_angle: 250,
                   inner_radius: 80, outer_radius: 90) do |chart| %>
    <% chart.with_polar_grid(radii: [90, 80], fills: %i[muted background]) %>
    <% chart.with_radial_bar(data_key: :visitors, background: true, corner_radius: 10) %>
    <% chart.with_center_label(title: "200", subtitle: "Visitors") %>
  <% end %>
</div>
```