🐹 gerbil

This packages makes it easy to build pretty svg charts you can include in a Lustre app, or render to serve as static documents! Here's an example of a chart built with gerbil:

.doc-chart { padding-block-start: var(--gap); padding-block-end: var(--small-gap); padding-inline-end: var(--small-gap); padding-inline-start: var(--gap); } body { --plot-colour: #4078f2; } body.theme-dark { --plot-colour: var(--pink); --x-tick-colour: var(--bg-tint-1); --y-tick-colour: var(--bg-tint-1); }

Jan 2026Apr 2026Jul 2026Oct 202605101520

This is the code you need to build it:

import gleam/option.{None, Some}
import gleam/time/calendar.{April, Date, January, July, March, November, October}
import lustre/element

import gerbil/axis
import gerbil/plot

pub fn chart() -> String {
  let sightings = [
    chart.point(Date(2026, January, 10), 5, []),
    chart.point(Date(2026, March, 12), 15, []),
    chart.point(Date(2026, July, 11), 20, []),
    chart.point(Date(2026, October, 10), 10, []),
    chart.point(Date(2026, November, 10), 3, []),
  ]

  let date =
    axis.date()
    |> axis.min(Date(2026, January, 1))

  let gerbil_sightings = axis.int()

  chart.new(x: date, y: gerbil_sightings)
  |> chart.add(chart.line([], sightings))
  |> chart.add(chart.points([], sightings))
  |> chart.add(chart.vertical_band(None, Some(Date(2026, April, 1)), []))
  |> chart.to_svg
  |> element.to_string
}