# Pie Chart

A pie chart for showing parts of a whole.

Ships in the separate, optional poetry-charts gem.

## Default

```erb
<%# Each row carries its slice color in a fill key; the config maps
    names to labels and colors. %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-default") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser) %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Donut

```erb
<%# inner_radius: 60 opens the donut hole. %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-donut") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser, inner_radius: 60) %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Donut active

```erb
<%# active_index pops one slice out by 10px (the donut-active look). %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-donut-active") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser, inner_radius: 60, active_index: 0) %>
  <% end %>
</div>
```

## Donut text

```erb
<%# with_center_label fills the donut hole with plain SVG text. %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-donut-text") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser, inner_radius: 60) %>
    <% chart.with_center_label(title: "925", subtitle: "Visitors") %>
  <% end %>
</div>
```

## Label list

```erb
<%# labels: :list writes a label inside each slice; label_key picks
    the row field to print (here the browser name). %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-label-list") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser, labels: :list, label_key: :browser) %>
  <% end %>
</div>
```

## Legend

```erb
<%# with_legend lists the slices below the chart. %>
<% 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)" }
   ]
   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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, data: data, config: config, id: "pie-legend") do |chart| %>
    <% chart.with_pie(data_key: :visitors, name_key: :browser) %>
    <% chart.with_legend %>
  <% end %>
</div>
```

## Stacked

```erb
<%# Stacked pies: two with_pie slots, each with its own data: and
    non-overlapping radii. The first pie drives the tooltip. %>
<% browsers = [
     { 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)" }
   ]
   months = [
     { month: "january", desktop: 186, fill: "var(--color-january)" },
     { month: "february", desktop: 305, fill: "var(--color-february)" },
     { month: "march", desktop: 237, fill: "var(--color-march)" }
   ]
   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)" },
              desktop: { label: "Desktop" },
              january: { label: "January", color: "var(--chart-1)" },
              february: { label: "February", color: "var(--chart-2)" },
              march: { label: "March", color: "var(--chart-3)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:pie, config: config, id: "pie-stacked") do |chart| %>
    <% chart.with_pie(data: browsers, data_key: :visitors, name_key: :browser, outer_radius: 60) %>
    <% chart.with_pie(data: months, data_key: :desktop, name_key: :month,
                      inner_radius: 70, outer_radius: 90) %>
  <% end %>
</div>
```