[SOLVED] Bokeh JS save plot as PNG programmatically

Bokeh JS save plot as PNG programmatically

How to save plots in Bokeh JS as PNG programmatically?

The documentation gives the following example in Python:

from bokeh.io import export_png

export_png(plot, filename="plot.png")

I could however not find an example on how to programmatically save plots in JavaScript.

The use case is to generate plots in the back-end and use them in automatically generated reports.

Any tips on saving plots in Bokeh JS programmatically are welcome!

Solution

Very late answer but there is now a workaround to do this: https://discourse.bokeh.org/t/trying-to-print-export-bokehjs-plot-how-can-i-do-this-how-to-use-export-png/10074/5

The BokehJS plots have a save button which runs with this code:

async save(name: string): Promise<void> {
  const blob = await this.parent.export().to_blob()
  const link = document.createElement("a")
  link.href = URL.createObjectURL(blob)
  link.download = name // + ".png" | "svg" (inferred from MIME type)
  link.target = "_blank"
  link.dispatchEvent(new MouseEvent("click"))
}

You can access plots with this line (ie. replace this.parent.export() with this: 0 is to get the first plot

Object.values(Bokeh.index)[0].export

I have this function tied to my own button so I can do some other operations as well as save the plot.

Edit: BokehJS plots in simple terms get drawn onto a canvas HTML element, the toolbar is then absolutely positioned on top of this somehow. So it saves the plot the same way you could save a regular canvas element.