TimelessMetrics.Chart (timeless_metrics v6.0.6)

Copy Markdown View Source

Pure-Elixir SVG chart generator for time series data.

Generates clean, embeddable SVG line charts with no external dependencies. Use in <img> tags, markdown, emails, notebooks — anywhere that renders images.

Example

data = [
  %{labels: %{"host" => "web-1"}, data: [{1700000000, 73.2}, {1700000060, 74.1}]},
  %{labels: %{"host" => "web-2"}, data: [{1700000000, 81.0}, {1700000060, 79.5}]}
]

svg = TimelessMetrics.Chart.render("cpu_usage", data, width: 800, height: 300)

Summary

Functions

render(title, series, opts \\ [])

Render a multi-series SVG chart.

Functions

render(title, series, opts \\ [])

Render a multi-series SVG chart.

Parameters

  • title - Chart title (usually the metric name)
  • series - List of %{labels: map, data: [{timestamp, value}, ...]}
  • opts - Options:
    • :width - SVG width in pixels (default: 800)
    • :height - SVG height in pixels (default: 300)
    • :label_key - Label key to use for legend (auto-detected if omitted)
    • :theme - :light, :dark, or :auto (default: :auto)
      • :auto uses CSS prefers-color-scheme to switch at render time
    • :annotations - List of %{timestamp: ts, title: "..."} for vertical markers

Returns an SVG string.