# Responsive plot in Bokeh

**URL:** <https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466>\
**Category:** Community Support\
**Tags:** bokeh\
**Created:** [August 14, 2022, 8:27am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466 "2022-08-14T08:27:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 14, 2022, 8:27am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/1 "2022-08-14T08:27:11Z")

</div>

Hello  
I have several plots on one page but my plots are not responsive. I tested different modes, but I don’t know where the problem is!  
In the following, I will write parts of my code.

I couldn’t find the CDN CSS file for bokeh version 2.4 ! Is there no need to add CSS files?

Because the codes are summarized, the output of this code is slightly different from the photos, but the same errors exist.  
1- The plot is not responsive.  
2- By changing max\_width, the size of the plot does not change.  
please guide me.

Data:  
[Data](http://uploadb.me/pt1cc46vojqs/eshtahard_res_vel.csv.html)

```auto
from bokeh.plotting import figure, show
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, ColumnDataSource,ColumnDataSource
from datetime import datetime as dt
from bokeh.layouts import column
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource,Panel, Tabs, ColumnDataSource,ColumnDataSource
from bokeh.layouts import column

def my_plot(nn):

    dataset = pd.read_csv(r"E:\Project\mysite\web\eshtahard_res_vel.csv")
    dataset = dataset[0:40]
    dataset['Date'] = pd.to_datetime(dataset['Date'])
    Date_list = list(dataset['Date'])
    Date = pd.to_datetime(Date_list, format='%Y-%B-%d')
    velocity = dataset["velocity"]

    source = ColumnDataSource(data=dict(Date=Date, velocity=velocity))

    p = figure(sizing_mode="stretch_width",max_width=1000, height=400)

    p.line(x='Date', y='velocity', source=source,line_color="#DAA520", line_width=2, alpha=1)

    select = figure(title="Drag the middle and edges of the selection box to change the range above", y_range=p.y_range,
			x_axis_type="datetime", y_axis_type=None,tools="", toolbar_location=None, background_fill_color="#efefef",
			sizing_mode="stretch_width",max_width=800, height=130)
						
    pp= column(p, select)
    return(pp)		
		
# plot res_vel :
p1 = my_plot(1)
tab1 = Panel(child=p1, title="5 days")
p2 = my_plot(2)
tab2 = Panel(child=p2, title="15 days")
p3 = my_plot(3)
tab3 = Panel(child=p3, title="30 days")

Result=Tabs(tabs=[tab1, tab2, tab3])

show(Result)

```

 ![a1](https://discourse-uploads.bokeh.org/original/2X/3/351450749c6120f22ecb83cfeb60af974c25632a.jpeg)  
 ![a2](https://discourse-uploads.bokeh.org/original/2X/1/1cb1a5e6ddcbc1ea489f67ea21db8d80e6fe94cc.jpeg)

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 14, 2022, 4:30pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/2 "2022-08-14T16:30:32Z")

</div>

> [@Keyhan](#):
>
> I couldn’t find the CDN CSS file for bokeh version 2.4 ! Is there no need to add CSS files?

Correct. Bokeh ships CSS internally with the JS bundles nowadays.

> parts of my code

I would happily take a quick closer look, but I would need to be actually run the code. I.e. you need to provide a _ **complete** _ [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example).

It’s also not 100% clear what the issue is. E.g. above I see a plot with `sizing_mode="stretch_width"` and then a corresponding image where the plot seems to have taken up the entire width of its enclosing container. So what is it that is happening or not happening that is contrary to your expectations, you need to _be extremely detailed and specific_ about:

- what exactly you are seeing
- how this differs from your expectations

---

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 14, 2022, 6:51pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/3 "2022-08-14T18:51:32Z")

</div>

Thankful  
I edited the question and it is now testable.  
I also changed the pictures.

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 16, 2022, 4:42am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/4 "2022-08-16T04:42:22Z")

</div>

You need to configure the entire column layout:

```python
column(p, select, sizing_mode="stretch_width")

```

---

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 16, 2022, 9:30am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/5 "2022-08-16T09:30:03Z")

</div>

Thank you  
When I use the code `show(Result)` it works fine.  
But I want to display the output in an HTML file (in the Django framework) and when I use the following code, the plot is not responsive!

```auto
Result = column(sss,sss2,sizing_mode="stretch_width")

script, div = components(Result)
   
return render(request, r'web\s_info.html', {'script': script, 'div': div,"station_name": str(slug)})

```

Do you know why?  
Thanks

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 16, 2022, 3:38pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/6 "2022-08-16T15:38:58Z")

</div>

> [@Keyhan](#):
>
> Do you know why?

No I don’t and can’t speculate without code to run.

---

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 16, 2022, 3:53pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/7 "2022-08-16T15:53:29Z")

</div>

This is the same codes in the question, only for display, the “show” command is not used.

I think the problem is with the following code:  
`script, div = components(Result)`

And then I put “script”, “div” in the html file.  
I think I should use another method to display in the HTML file. But I don’t know what method to use!

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 16, 2022, 4:01pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/8 "2022-08-16T16:01:56Z")

</div>

> This is the same codes in the question

That’s irrelevant. The issue is almost certainly with HTML template that you are embedding into, which you have not provided. To get help with a “why isn’t this working” question, you must provide a complete [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) that reproduces _ **your actual problem** _. In this case your problem is: “plots are not responsive _when I embed them in my template_”, which means your MRE needs to contain the (crucially relevant) templating portion.

---

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 18, 2022, 3:46pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/9 "2022-08-18T15:46:07Z")

</div>

Thankful  
You said to provide a Minimal Reproducible Example, but it takes time to make.  
In my opinion, I will provide the following code first, maybe there is a problem in it.  
This is my html code.  
Do you see a problem with it?

```auto
{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center plot_info" id="fault_info">
    <div class="row plot_info" >
        <div class=" plot_info" >
            <div class="plot_info">
            </div>
                <div id="plot" style=" direction: ltr;">
                 {{div| safe}}
                </div>
        </div>
    </div>

</div>
{% endblock content %}
{% block otherjs %}
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.0.min.js"
        crossorigin="anonymous"></script>
{{script| safe}}
{% endblock otherjs %}

```

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 18, 2022, 4:02pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/10 "2022-08-18T16:02:44Z")

</div>

I can’t investigate and diagnose what I can’t actually run myself. 🤷 Maybe someone else here will have ideas for you.

---

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [August 18, 2022, 5:29pm UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/11 "2022-08-18T17:29:23Z")

</div>

Taking the time to make an MRE is a small price to pay for free help on the internet. Furthermore you’d be amazed at how often you end up solving your problem halfway through making it, → has happened to me more times than I can count.

---

<div class="post-metadata">

**Author:** ![Keyhan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/keyhan/32/5280_2.png) [@Keyhan](https://discourse.bokeh.org/u/Keyhan)\
**Post date:** [August 19, 2022, 8:51am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/12 "2022-08-19T08:51:45Z")

</div>

thanks guys  
Sometimes talking about a problem solves it.  
I thought the problem was with the Python and Bekou codes, but Bryan said the problem was with the HTML codes.  
So I went and checked it out and displayed the chart in a simple, basic HTML page and saw that it was working fine and the problem was with my css code.  
And the problem is solved.  
@Bryan Thank you for your support and help.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [November 17, 2022, 8:52am UTC](https://discourse.bokeh.org/t/responsive-plot-in-bokeh/9466/13 "2022-11-17T08:52:27Z")

</div>

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