🐹 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
}

To get started, you can check:

The docs of the gerbil/axis and gerbil/chart modules.
The Guides page, it has common questions, problems, and code snippets you can have a look at.