# Line Chart

A line chart for trends over a continuous axis.

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_line_chart(data: data, config: config, id: "line-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_line(data_key: :desktop) %>
    <% chart.with_tooltip(hide_label: true) %>
  <% end %>
</div>
```

## Dots

```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_line_chart(data: data, config: config, id: "line-dots",
                        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_line(data_key: :desktop, dots: true) %>
  <% end %>
</div>
```

## Dots colors

```erb
<%# Per-point dot colors: each row carries its own fill via dot_color_key,
    resolved through the config's --color-* variables. %>
<% 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", 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)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_line_chart(data: data, config: config, id: "line-dots-colors",
                        margin: { top: 24, left: 24, right: 24 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_line(data_key: :visitors, dots: true, dot_radius: 5, dot_color_key: :fill) %>
  <% end %>
</div>
```

## Label

```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_line_chart(data: data, config: config, id: "line-label",
                        margin: { top: 20, left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :month, tick_formatter: ->(v) { v[0, 3] }) %>
    <% chart.with_line(data_key: :desktop, dots: true, labels: true) %>
  <% end %>
</div>
```

## Linear

```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_line_chart(data: data, config: config, id: "line-linear",
                        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_line(data_key: :desktop, curve: :linear) %>
  <% 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_line_chart(data: data, config: config, id: "line-multiple",
                        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_line(data_key: :desktop) %>
    <% chart.with_line(data_key: :mobile) %>
  <% end %>
</div>
```

## References and errors

```erb
<%# Error bars ride each row as err: [below, above]; reference line and
    reference area mark thresholds against the y scale. %>
<% data = [
     { month: "January", desktop: 186, err: [12, 20] },
     { month: "February", desktop: 305, err: [15, 19] },
     { month: "March", desktop: 237, err: [18, 18] },
     { month: "April", desktop: 73, err: [21, 17] },
     { month: "May", desktop: 209, err: [24, 16] },
     { month: "June", desktop: 214, err: [27, 15] }
   ]
   config = { desktop: { label: "Desktop", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_line_chart(data: data, config: config, id: "line-refs",
                        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_line(data_key: :desktop, error_key: :err) %>
    <% chart.with_reference_line(y: 204, label: "avg") %>
    <% chart.with_reference_area(y1: 280, y2: 320, label: "goal") %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Step

```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_line_chart(data: data, config: config, id: "line-step",
                        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_line(data_key: :desktop, curve: :step) %>
  <% end %>
</div>
```