# Area Chart

An area chart for volume or cumulative totals over a continuous axis.

Ships in the separate, optional poetry-charts gem.

## Default

```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_area_chart(data: data, config: config, id: "area-default",
                        margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_area(data_key: :mobile, stack: :a) %>
    <% chart.with_area(data_key: :desktop, stack: :a) %>
    <% chart.with_tooltip(indicator: :dot) %>
  <% end %>
</div>
```

## Legend toggle

```erb
<%# live: true carries the {spec, frame} payload; clicking a legend item
    re-renders CLIENT-SIDE through the vendored kernel - the hidden series
    leaves the domain (recharts' rescale-on-hide). %>
<%# Live data carries PRE-FORMATTED category strings - lambdas can't ride
    the JSON payload (the gem raises a teaching error). %>
<% data = [
     { month: "Jan", desktop: 186, mobile: 80 },
     { month: "Feb", desktop: 305, mobile: 200 },
     { month: "Mar", desktop: 237, mobile: 120 },
     { month: "Apr", desktop: 73, mobile: 190 },
     { month: "May", desktop: 209, mobile: 130 },
     { month: "Jun", 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_area_chart(data: data, config: config, id: "area-legend", live: true,
                        margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month) %>
    <% chart.with_area(data_key: :mobile) %>
    <% chart.with_area(data_key: :desktop) %>
    <% chart.with_tooltip(indicator: :dot) %>
    <% chart.with_legend(toggle: true) %>
  <% end %>
</div>
```