Plotto - a way to create SVG and PNG charts 100% in Elixir

manuel-rubio

I’m excited to introduce you to Plotto, a chart library created in 100% Elixir that generates SVG and PNG images. Yes, it’s not only generating SVG for interactive use in combination with LiveView, but you can also generate directly to PNG with the same image and send it vía email, Telegram, Slack, or whatever you need.

Plotto is a plot library, 100% Elixir, that’s focused on generating beautiful SVG charts and exporting the same chart to PNG when it’s needed — including the PNG rasterizer and TrueType font renderer, no external binaries or NIFs required.

It is very useful when you are developing a website and need to integrate SVG charts. Chart data items accept arbitrary HTML/SVG attributes (phx-click, data-*, etc.), so if you are using Phoenix LiveView you can attach events, actions, and feedback to individual bars/points — without Plotto depending on Phoenix or LiveView in any way.

If you need to export or generate PNG charts for email, PDF, or sending via Telegram, Slack, Mattermost, etc., Plotto.to_png/1 renders the same chart to a PNG binary, anti-aliased and with full Unicode text support (including accented characters like á, é, ñ) via a bundled DejaVu Sans font.

Charts can also show an optional title and a legend (one color swatch + name row per series), positioned in any of the four corners — see :title and :legend in Plotto.BarChart or Plotto.LineChart. Negative values and mixed positive/negative domains are fully supported with an automatic zero baseline.

It was created to be introduced in the project Conta.

9 comments

#library #svg #png

32 1291 9

2026-09-06 18:12:24 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

alvinkatojr

You are killling it, man! I can’t wait to dive into the source. This and press both look amazing! Good work!

Post #1

MarcusRiemer

Oh, this is very interesting, thank you for your contribution! I’m currently rendering my own charts for (effectively) a distribution of outcomes for a game with dice:

Could I switch to Plotto for this? I skimmed the examples and didn’t see an option to put labels above the bars, but maybe I’m missing something. The colours in my example change whenever the distribution switches from “target damaged” to “target defeated”. I think for that I would have to pass two seperate series?

Post #2

manuel-rubio

I’m using both in Conta

Post #3

manuel-rubio

Done! New version 0.4.0 supports that:

categories = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "> 10"]

# 0..4 en la primera serie (rosa), 5..> 10 en la segunda serie (azul)
first_values = [9.3, 6.7, 8.4, 10.1, 12.0, 0, 0, 0, 0, 0, 0]
second_values = [0, 0, 0, 0, 0, 14.0, 9.4, 8.5, 7.2, 5.7, 8.6]

data = [
  %{
    name: "0-4 Range",
    data: Enum.zip_with(categories, first_values, fn cat, val -> %{label: cat, value: val} end)
  },
  %{
    name: "5+ Range",
    data: Enum.zip_with(categories, second_values, fn cat, val -> %{label: cat, value: val} end)
  }
]

pink = "#F06292"
blue = "#4E79A7"

chart =
  Plotto.BarChart.new!(
    data,
    mode: :stacked,
    colors: [pink, blue],
    label: fn item ->
      if item.value > 0 do
        "#{item.value}%"
      end
    end,
    width: 700,
    height: 400
  )

svg = Plotto.to_svg!(chart)
png = Plotto.to_png!(chart)

File.write!("two_color_bars.svg", svg)
File.write!("two_color_bars.png", png)

Here you go. The proof:

Post #4

MarcusRiemer

I started integrating Plotto and just stumbled over this: Plotto.LineChart — plotto v0.4.0

data uses the same multi-series shape as Plotto.BarChart, but today only the first series is drawn — full multi-series line rendering (multiple lines) is planned for a future release

Unluckily for me I do have line charts that look like this:

I could find another way to represent same-faction series than dashing, but the multi-series line chart have been exactly the chart I wanted to move to plotto in order to be able to render them for og:images.

Any ETA on that “future release”?

Post #5

manuel-rubio

Of course, but I don’t understand exactly what do you expect and what’s the issue?

Post #6

manuel-rubio

Done! New version 0.5.0

data = [
  %{
    name: "Elektrogriff (Gewitterbote)",
    dashed: true,
    color: "#9B59B6",
    data: [
      %{label: "1", value: 12},
      %{label: "2", value: 49},
      %{label: "3", value: 74},
      %{label: "4", value: 87},
      %{label: "5", value: 98}
    ]
  },
  %{
    name: "Sturmbogen (Wüstenjägerin)",
    color: "#8E44AD",
    data: [
      %{label: "1", value: 0},
      %{label: "2", value: 12},
      %{label: "3", value: 26},
      %{label: "4", value: 49},
      %{label: "5", value: 63},
      %{label: "6", value: 75},
      %{label: "7", value: 80},
      %{label: "8", value: 96}
    ]
  },
  %{
    name: "Jagddolch (Wüstenjägerin)",
    color: "#4A235A",
    data: [
      %{label: "1", value: 0},
      %{label: "2", value: 1},
      %{label: "3", value: 5},
      %{label: "4", value: 12},
      %{label: "5", value: 25},
      %{label: "6", value: 27},
      %{label: "7", value: 40},
      %{label: "8", value: 50},
      %{label: "9", value: 52},
      %{label: "10", value: 63}
    ]
  }
]

chart =
  Plotto.LineChart.new!(
    data,
    legend: :right_top,
    stroke_width: 3,
    width: 700,
    height: 450
  )

svg = Plotto.to_svg!(chart)
png = Plotto.to_png!(chart)

svg_path = Path.join(__DIR__, "weapons_chart.svg")
png_path = Path.join(__DIR__, "weapons_chart.png")

File.write!(svg_path, svg)
File.write!(png_path, png)

IO.puts("Successfully generated:")
IO.puts(" - SVG: #{svg_path}")
IO.puts(" - PNG: #{png_path}")

Post #7

MarcusRiemer

This is wonderful! I had some time yesterday and put Plotto to use at Wüstenjägerin gegen Gewitterbote · Summoners Compendium (linked page shows embedded SVG, is in german and is a technically unreleased feature that may still be buggy) and as png for the og:image:

I made minor CSS tweaks to show labels and axis even in darkmode:

/* Relies on Daisy UI, not portable */
.plotto-embed .plotto-axis {
  stroke: var(--color-base-300);
}

/* Maybe worth porting over: bridges the gap between HTML color for text and svg */
.plotto-embed .plotto-label,
.plotto-embed .plotto-legend,
.plotto-embed text {
  fill: currentColor;
}

Asking you for features has been so scarily effective, that I am almost hesitant to propose more. Please don’t feel pressured, these are things that would delight me, but I am very happy as is:

Change the legends orientation to horizontal when being plotted under or over the graph. The current layout works well, but I do see this as an option to reduce empty whitespace by plotting my up to 4 options below the graph in a horizontal layout.
Configuration option to add target values for the y axis. In my case I would like to always go to 100.
Configuration option to add a suffix to the values (y-axis label and <title> on circles), in my case this would be a %.
Configuration option to show horizontal guidelines with the y axis labels.

Post #8

manuel-rubio

Released v0.6.0

Don’t worry, it’s satisfactory that someone uses the library. Don’t forget to give a star to the GitHub project

The features:

Horizontal Legend Layout & Centre Alignments

Allows displaying legends horizontally side-by-side (legend_orientation: :horizontal) when placed at the top or bottom of the chart, along with centred positions (:top_center, :bottom_center). This saves significant lateral canvas space on wide charts with lengthy series names.

Y-Axis Target Bounds & Guide Lines

Enables defining explicit minimum and maximum target bounds (y_max, y_min) with configurable soft expansions (y_max_soft, y_min_soft). It also introduces horizontal reference guide lines (y_max_guide, y_min_guide) with customizable line styles and colours to highlight specific goals or critical thresholds.

Value Prefix & Suffix Formatting

Adds support for prepending prefixes (prefix: “$”, “€”) and appending suffixes (suffix: “%”, “k”, " USD") to numeric values. These formats are automatically and consistently applied across Y-axis tick labels, point/bar tooltips, and element top labels, with proper handling of negative numbers.

Horizontal & Vertical Grid Guidelines

Introduces customizable grid lines across the plotting canvas (y_guidelines and x_guidelines), projecting reference lines from axis tick marks. They can be toggled on with theme defaults or styled with custom colours and strokes (:dotted, :dashed, :solid) to facilitate reading and comparing data points.

data = [
  %{
    name: "Elektrogriff (Gewitterbote)",
    dashed: true,
    color: "#9B59B6",
    data: [
      %{label: "1", value: 12},
      %{label: "2", value: 49},
      %{label: "3", value: 74},
      %{label: "4", value: 87},
      %{label: "5", value: 98}
    ]
  },
  %{
    name: "Sturmbogen (Wüstenjägerin)",
    color: "#8E44AD",
    data: [
      %{label: "1", value: 0},
      %{label: "2", value: 12},
      %{label: "3", value: 26},
      %{label: "4", value: 49},
      %{label: "5", value: 63},
      %{label: "6", value: 75},
      %{label: "7", value: 80},
      %{label: "8", value: 96}
    ]
  },
  %{
    name: "Jagddolch (Wüstenjägerin)",
    color: "#4A235A",
    data: [
      %{label: "1", value: 0},
      %{label: "2", value: 1},
      %{label: "3", value: 5},
      %{label: "4", value: 12},
      %{label: "5", value: 25},
      %{label: "6", value: 27},
      %{label: "7", value: 40},
      %{label: "8", value: 50},
      %{label: "9", value: 52},
      %{label: "10", value: 63}
    ]
  }
]

chart =
  Plotto.LineChart.new!(
    data,
    legend: :bottom_center,
    legend_orientation: :horizontal,
    y_max: 100,
    suffix: "%",
    y_guidelines: true,
    stroke_width: 3,
    width: 700,
    height: 450
  )

svg = Plotto.to_svg!(chart)
png = Plotto.to_png!(chart)

svg_path = Path.join(__DIR__, "weapons_chart.svg")
png_path = Path.join(__DIR__, "weapons_chart.png")

File.write!(svg_path, svg)
File.write!(png_path, png)

IO.puts("Successfully generated:")
IO.puts(" - SVG: #{svg_path}")
IO.puts(" - PNG: #{png_path}")