# Bar Chart

A bar chart for comparing values across categories.

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_bar_chart(data: data, config: config, id: "bar-default") do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_bar(data_key: :desktop, radius: 8) %>
    <% chart.with_tooltip(hide_label: true) %>
  <% end %>
</div>
```

## Active

```erb
<%# color_key: :fill reads each row's fill; active_index: highlights one
    bar with the shadcn active look (fill-opacity + dashed stroke). %>
<% config = {
     visitors: { label: "Visitors", color: "var(--chart-2)" },
     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_bar_chart(data: data, config: config, id: "bar-active") do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :browser, tick_formatter: ->(v) { config[v.to_sym][:label] }) %>
    <% chart.with_bar(data_key: :visitors, radius: 8, color_key: :fill, active_index: 2) %>
  <% end %>
</div>
```

## Horizontal

```erb
<%# orientation: :horizontal grows bars rightward - the category axis
    moves to the Y side (with_y_axis data_key:) and the numeric axis
    hides. Negative left margin tucks the ticks against the bars. %>
<% 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_bar_chart(data: data, config: config, id: "bar-horizontal",
                       orientation: :horizontal, margin: { left: -20 }) do |chart| %>
    <% chart.with_y_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }, tick_margin: 10) %>
    <% chart.with_bar(data_key: :desktop, radius: 5) %>
  <% end %>
</div>
```

## Label

```erb
<%# labels: true prints each bar's value above it; margin top makes room
    for the topmost label. %>
<% 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_bar_chart(data: data, config: config, id: "bar-label",
                       margin: { top: 20 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_bar(data_key: :desktop, radius: 8, labels: true) %>
  <% end %>
</div>
```

## Mixed

```erb
<%# Horizontal bars, each colored from its row via color_key: :fill -
    the shadcn "mixed" block. %>
<% config = {
     visitors: { label: "Visitors", color: "var(--chart-2)" },
     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_bar_chart(data: data, config: config, id: "bar-mixed",
                       orientation: :horizontal, margin: { left: 0 }) do |chart| %>
    <% chart.with_y_axis(data_key: :browser, tick_margin: 10,
                         tick_formatter: ->(v) { config[v.to_sym][:label] }) %>
    <% chart.with_bar(data_key: :visitors, radius: 5, color_key: :fill) %>
  <% 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_bar_chart(data: data, config: config, id: "bar-multiple") do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_bar(data_key: :desktop, radius: 4) %>
    <% chart.with_bar(data_key: :mobile, radius: 4) %>
  <% end %>
</div>
```

## Negative

```erb
<%# Negative values drop below the zero baseline; cell_fill colors each
    bar by sign, and labels: true + label_key: writes the month above
    (or below) each bar. %>
<% data = [
     { month: "January", visitors: 186 },
     { month: "February", visitors: 205 },
     { month: "March", visitors: -207 },
     { month: "April", visitors: 173 },
     { month: "May", visitors: -209 },
     { month: "June", visitors: 214 }
   ]
   config = { visitors: { label: "Visitors" } } %>
<div class="w-full max-w-xl">
  <%= poetry_bar_chart(data: data, config: config, id: "bar-negative") do |chart| %>
    <% chart.with_grid %>
    <% chart.with_bar(data_key: :visitors, labels: true, label_key: :month,
                      cell_fill: ->(_row, value) { value.positive? ? "var(--chart-1)" : "var(--chart-2)" }) %>
  <% end %>
</div>
```

## Stacked

```erb
<%# Stacked bars share a stack: id; the radius arrays round only the
    outer edge - [0,0,4,4] for the bottom bar, [4,4,0,0] for the top. %>
<% 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_bar_chart(data: data, config: config, id: "bar-stacked") do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_bar(data_key: :desktop, stack: :a, radius: [0, 0, 4, 4]) %>
    <% chart.with_bar(data_key: :mobile, stack: :a, radius: [4, 4, 0, 0]) %>
    <% chart.with_legend %>
  <% end %>
</div>
```