Axis and titel blurry (pixel not vector)

When I zoom into a figure rendered in the browser, the axes become very blurry. Is this normal? If so, what is the reason for rendering pixels and not vectors.

Even at zoom level 100% the hole bokeh figure looks blurry compared to other elements on a website.
Is there something I can do?

Here an example with some html text. Screenhot out of Chrome with zoom level 250x.

Bokeh normally renders to an HTML canvas, which is a a raster pixel canvas. So if you zoom the browser view, all that can happen is that the fixed pixels of the existing canvas get larger or smaller. You could try passing output_backend="svg" to figure which will use Bokeh’s SVG (vector) backend for rendering. That should “scale” with zoom AFAIK, but please be advised that the SVG backend is not as developed and may be missing features relative to the default canvas backend. Alternatively, you can increase the width and height of the figure to have a larger canvas with more pixels that will be better zoomable (across some range, at least).

Oh, using a responsive sizing mode, e.f. sizing_mode="scale_width" might also work.

Thanks for your fast answer, Bryan! Does using the svg backend output only work for a static file export? Can I somehow apply this for the html-file where I can zoom in?

output_backend is a parameter you can pass to figure, as I mentioned above.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.