☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

Demo of resizing / responsive plots (works in nbviewer too!)

Community Support
Sarah_Bird1
Sarah_Bird1

Hi all,

I’d been meaning to make a demo of responsive* plots and Andrew’s question yesterday prompted me to.

  • responsive in the sense of ‘responsive web design’ - as your browser resizes the content inside it does too.

You can see the notebook here:

http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/Resizing%20charts%20%26%20plots%20(inc.%20responsive).ipynb

Although I was imagining this for people who want to embed their plots in web pages, it also works in nbviewer which means you can now share your ipython notebook plots and they’ll resize to whatever browser size they’re opened in!

Best,

Bird

⌁   Link to post
Damian_Avila
Damian_Avila

This is very nice Bird!!!

We should eventually make this part of Bokeh itself…

Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…

Cheers.

⌁   Link to post
Ryan_Hafen
Ryan_Hafen

Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).

···

On Jun 6, 2015, at 3:52 AM, Damian Avila damian.avila@continuum.io wrote:

This is very nice Bird!!!

We should eventually make this part of Bokeh itself…

Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…

Cheers.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁   Link to post
Sarah_Bird3
Sarah_Bird3

@Ryan:

Resizing grid plots - yes!

Resizing attributes - totally agree - I’ve had this problem myself but didn’t have much time to solve it so I just set a minimum size. When I asked around quickly rescaling text seemed to be non-trivial did you find a solution to this?

Best,

Bird

···

On Sat, Jun 6, 2015 at 8:25 PM, Ryan Hafen rhafen@gmail.com wrote:

Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).

On Jun 6, 2015, at 3:52 AM, Damian Avila damian.avila@continuum.io wrote:

This is very nice Bird!!!

We should eventually make this part of Bokeh itself…

Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…

Cheers.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/578DE9BA-A30E-4459-A70E-2E172D26E0CE%40gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁   Link to post
Sarah_Bird3
Sarah_Bird3

Thanks Damian - I had no idea!

···

On Sat, Jun 6, 2015 at 12:52 PM, Damian Avila damian.avila@continuum.io wrote:

This is very nice Bird!!!

We should eventually make this part of Bokeh itself…

Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…

Cheers.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁   Link to post
Ryan_Hafen
Ryan_Hafen

I have a hacky solution from the interwebs for scaling everything in a plot that seems to be “not advised” for production use.

Basically I just use the scale css transform:

$.fn.zoomscale = function(x) {

if(!(this).filter(':visible').length && x != 1) return (this);

if(!$(this).parent().hasClass(‘scaleContainer’)){

$(this).wrap($('<div class="scaleContainer">').css('position','relative'));

$(this).data({

    'originalWidth': $(this).width(),

    'originalHeight': $(this).height()});

}

$(this).css({

'transform': 'scale('+x+')',

'-ms-transform': 'scale('+x+')',

'-moz-transform': 'scale('+x+')',

'-webkit-transform': 'scale('+x+')',

'transform-origin': 'right bottom',

'-ms-transform-origin': 'right bottom',

'-moz-transform-origin': 'right bottom',

'-webkit-transform-origin': 'right bottom',

'position': 'absolute',

'bottom': '0',

'right': '0',

});

if(x == 1)

$(this).unwrap().css('position','static'); else

  $(this).parent()

    .width($(this).data('originalWidth')*x)

    .height($(this).data('originalHeight')*x);

return $(this);

};

The x parameter is the scale factor - so you just need to compute the scale required to get from the original size to the desired size.

This of course works with grid plots as well. However it can mess up the hover tool, etc. and doesn’t work well for scaling up.

Ideally it would be nice to have a native resize that allows for scaling of all plot elements, maybe down to an optionally specified minimum (e.g. text cannot get smaller than 6px or something) with the idea in mind that the user specified the size attributes at the originally specified plot width/height for a reason and would like the aesthetic preserved as the plot is resized.

···

On Sat, Jun 6, 2015 at 8:25 PM, Ryan Hafen rhafen@gmail.com wrote:

Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).

On Jun 6, 2015, at 3:52 AM, Damian Avila damian.avila@continuum.io wrote:

This is very nice Bird!!!

We should eventually make this part of Bokeh itself…

Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…

Cheers.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/578DE9BA-A30E-4459-A70E-2E172D26E0CE%40gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁   Link to post

End of archived discussion · Replies are disabled