sparklinekit/bar

SVG and PNG bar sparklines.

import sparklinekit/bar
import sparklinekit/theme

pub fn revenue() -> String {
  bar.new([3.0, 7.0, 2.0, 9.0, 5.0])
  |> bar.with_theme(theme.sunset())
  |> bar.with_corner_radius(2.0)
  |> bar.to_svg
}

Positive and negative values share a zero baseline: positives rise above it, negatives fall below. with_negative_color paints the falling bars in a contrasting colour so win/loss charts read at a glance.

Types

Builder

opaque </>

Opaque builder for a bar sparkline.

pub opaque type Builder

Values

new

</>

pub fn new(values: List(Float)) -> Builder

Start a new bar sparkline builder.

Defaults: 200x40 viewBox, currentColor fill, the default theme’s negative colour (#EF4444) for bars below the zero baseline, 1.0px gap between bars, no rounded corners, no background.

new_ints

</>

pub fn new_ints(values: List(Int)) -> Builder

Start a builder from a list of Int values.

to_png

</>

pub fn to_png(builder: Builder) -> BitArray

Render the builder to PNG bytes (8-bit RGBA truecolor). The viewBox dimensions double as the pixel size. An empty series leaves the canvas blank at that size; a single value or an all-equal series draws the same half-height bars as to_svg.

The PNG IDAT payload is written using DEFLATE’s uncompressed “store” blocks (no Huffman coding) so the encoder stays pure Gleam with zero FFI. As a result the output is roughly width * height * 4 bytes regardless of how uniform the image is — for visual size context, prefer SVG.

to_svg

</>

pub fn to_svg(builder: Builder) -> String

Render the builder to a self-contained <svg> element string.

An empty series produces the <svg> element with no bars, so it still reserves its space in a layout. A single value, or a series where every value is the same, draws half-height bars rising from the bottom: the chart shows a constant without filling the canvas as if the value were the maximum of some wider range.

with_background_color

</>

pub fn with_background_color(
  builder: Builder,
  color: String,
) -> Builder

Set the background rectangle colour. "none" disables the background.

with_bar_gap

</>

pub fn with_bar_gap(builder: Builder, gap: Float) -> Builder

Set the gap between adjacent bars in user units. The per-bar width is derived from the total width, bar count, and this gap. Negative values are clamped to 0.0.

with_color

</>

pub fn with_color(builder: Builder, color: String) -> Builder

Set the positive-bar fill colour (any CSS colour string).

with_corner_radius

</>

pub fn with_corner_radius(
  builder: Builder,
  radius: Float,
) -> Builder

Set the corner radius in user units. The renderer clamps the radius to half the smaller side of each individual bar so the shape stays a rectangle / capsule rather than turning into a circle.

with_int_values

</>

pub fn with_int_values(
  builder: Builder,
  values: List(Int),
) -> Builder

Replace the data series with a list of Ints.

with_negative_color

</>

pub fn with_negative_color(
  builder: Builder,
  color: String,
) -> Builder

Use a separate colour for bars below the zero baseline.

with_size

</>

pub fn with_size(
  builder: Builder,
  width: Int,
  height: Int,
) -> Builder

Set the viewBox / pixel dimensions. Non-positive values are normalised to 1.

with_theme

</>

pub fn with_theme(
  builder: Builder,
  theme: theme.Theme,
) -> Builder

Apply every colour slot from theme. The theme’s negative colour is used for bars below the zero baseline; calling with_negative_color afterwards overrides just that slot.

with_values

</>

pub fn with_values(
  builder: Builder,
  values: List(Float),
) -> Builder

Replace the data series after construction.