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

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

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:

image643×257 9.4 KB

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?

I’m using both in Conta

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:

image1354×752 10.7 KB

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:

image741×277 22 KB

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”?

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

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}")

image700×450 7.66 KB

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:

image800×400 8.49 KB

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:

1. 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.
2. Configuration option to add target values for the y axis. In my case I would like to always go to 100.
3. Configuration option to add a suffix to the values (y-axis label and <title> on circles), in my case this would be a %.
4. Configuration option to show horizontal guidelines with the y axis labels.