Search code examples
bokehjs

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.