# Doesn't work sizing\_mode = 'stretch\_width' when using histogram

**URL:** <https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341>\
**Category:** HoloViews\
**Tags:** panel, holoviews\
**Created:** [February 4, 2022, 3:03am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341 "2022-02-04T03:03:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kazux68k](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/kazux68k/32/2763_2.png) [@kazux68k](https://discourse.holoviz.org/u/kazux68k)\
**Post date:** [February 4, 2022, 3:03am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341/1 "2022-02-04T03:03:31Z")

</div>

Now I am trying to make scatter and histogram refer to this html ( [[Histogram — HoloViews v1.14.7](http://holoviews.org/reference/elements/bokeh/Histogram.html)] )  
I want to spread this mix graph( scatter and histogram ) . So I insert this command [pn.extension(sizing\_mode = ‘stretch\_width’)]

I can see spread my graph when use scatter only like as below.

## screen shot 1 (spread scatter graph)

 ![20220204_omit_histogram_01](https://discourse.holoviz.org/uploads/default/original/2X/5/5690479f081c89bb569c10cf22fa29018e841985.jpeg)

## screen shot 2 (scale down scatter graph)

 ![20220204_omit_histogram_02](https://discourse.holoviz.org/uploads/default/original/2X/5/598a10909bdc8e551e5c0afb0f995415d0ae8282.jpeg)

## screen shot 3(code change point)

 ![20220204_omit_histogram_03](https://discourse.holoviz.org/uploads/default/original/2X/d/d510373ce0a74d976d1e2b03e0321752a38fbb8f.jpeg)

It works well. But I mixed histogram. It doesn’t work.

## screen shot 4 (spread scatter and histogram graph : it doesn’t work well)

 ![20220204_omit_histogram_04](https://discourse.holoviz.org/uploads/default/original/2X/d/d252c9bbd8865377da93fed6befb9cf22d2d0766.jpeg)

## screen shot 5(code change point)

 ![20220204_omit_histogram_05](https://discourse.holoviz.org/uploads/default/original/2X/4/4f3cf73c9ad3794582edeb39741d8f5715b64d02.jpeg)

## simple code

```auto
import panel as pn
import numpy as np
import holoviews as hv
from holoviews import opts
hv.extension('bokeh')
pn.extension(sizing_mode = 'stretch_width')

np.random.seed(1)
data = np.random.randn(10000)
frequencies, edges = np.histogram(data, 20)
print('Values: %s, Edges: %s' % (frequencies.shape[0], edges.shape[0]))
hv.Histogram((edges, frequencies))

xs = np.linspace(0, np.pi*2)
ys = np.sin(xs)
curve = hv.Curve((xs, ys))
curve + hv.Histogram(curve)

hv.Histogram(curve).opts(
    opts.Histogram(fill_color=hv.dim('y').bin(bins=[-1, 0, 1], labels=['red', 'blue'])))

points = hv.Points(np.random.randn(100,2))
points.hist(dimension=['x','y'])

from holoviews.operation import histogram
points2 = hv.Points(np.random.randn(100,2)*2+1)

xhist, yhist = (histogram(points2, bin_range=(-5, 5), dimension=dim) *
                histogram(points, bin_range=(-5, 5), dimension=dim) 
                for dim in 'xy')

# when I insert histogram , sizing_mode = 'stretch_width' doesn't work
composition = (points2 * points) << yhist.opts(width=125) << xhist.opts(height=125)
composition.opts(opts.Histogram(alpha=0.3))

# when I omit histogram , sizing_mode = 'stretch_width' works well
# composition = (points2 * points) 

pn.serve(composition)

```

I want to spread this graph to fit screen size. Could someone help me to teach this method?

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [February 4, 2022, 4:37am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341/2 "2022-02-04T04:37:04Z")

</div>

maybe `composition.opts("Points",responsive=True).opts("Histogram", responsive=True)`

---

<div class="post-metadata">

**Author:** ![kazux68k](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/kazux68k/32/2763_2.png) [@kazux68k](https://discourse.holoviz.org/u/kazux68k)\
**Post date:** [February 4, 2022, 5:00am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341/3 "2022-02-04T05:00:54Z")

</div>

> [@ahuang11](#):
>
> composition.opts(“Points”,responsive=True).opts(“Histogram”, responsive=True)

## screen shot (scale down)

 ![20220204_omit_histogram_06](https://discourse.holoviz.org/uploads/default/original/2X/3/38e405981d2bec5baf3b17d90029e7277c94d1b6.jpeg)

## screen shot (spread graph)

 ![20220204_omit_histogram_07](https://discourse.holoviz.org/uploads/default/original/2X/7/7755296c158afe1ebd465fb51b8dd3555a428001.jpeg)

## screen shot (modify point)

 ![20220204_omit_histogram_08](https://discourse.holoviz.org/uploads/default/original/2X/a/ae0ec928ee7050abd24801f19d5e64207650ee72.jpeg)

Thanks for quick replay. And I works that I wanted to.  
And then, if it possible , this my problem is easy answer for you.  
How can you find this solution?  
Because I’m sorry for bothering you about my easy question.  
So I want to check any document by myself.

## final code

```auto
import panel as pn
import numpy as np
import holoviews as hv
from holoviews import opts
hv.extension('bokeh')
pn.extension(sizing_mode = 'stretch_width')

np.random.seed(1)
data = np.random.randn(10000)
frequencies, edges = np.histogram(data, 20)
print('Values: %s, Edges: %s' % (frequencies.shape[0], edges.shape[0]))
hv.Histogram((edges, frequencies))

xs = np.linspace(0, np.pi*2)
ys = np.sin(xs)
curve = hv.Curve((xs, ys))
curve + hv.Histogram(curve)

hv.Histogram(curve).opts(
    opts.Histogram(fill_color=hv.dim('y').bin(bins=[-1, 0, 1], labels=['red', 'blue'])))

points = hv.Points(np.random.randn(100,2))
points.hist(dimension=['x','y'])

from holoviews.operation import histogram
points2 = hv.Points(np.random.randn(100,2)*2+1)

xhist, yhist = (histogram(points2, bin_range=(-5, 5), dimension=dim) *
                histogram(points, bin_range=(-5, 5), dimension=dim) 
                for dim in 'xy')

# when I insert histogram , sizing_mode = 'stretch_width' doesn't work
composition = (points2.opts(height=400) * points.opts(height=400)) << yhist.opts(width=125) << xhist.opts(height=125)
composition.opts(opts.Histogram(alpha=0.3))
composition.opts("Points",responsive=True).opts("Histogram", responsive=True)
# when I omit histogram , sizing_mode = 'stretch_width' works well
# composition = (points2 * points) 

pn.serve(composition)

```

Best regards,

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [February 4, 2022, 5:11am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341/4 "2022-02-04T05:11:55Z")

</div>

From experience XD I forget where I read it

---

<div class="post-metadata">

**Author:** ![kazux68k](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/kazux68k/32/2763_2.png) [@kazux68k](https://discourse.holoviz.org/u/kazux68k)\
**Post date:** [February 4, 2022, 5:14am UTC](https://discourse.holoviz.org/t/doesnt-work-sizing-mode-stretch-width-when-using-histogram/3341/5 "2022-02-04T05:14:35Z")

</div>

Thanks well. I’m continue to write code and have a lot of experience.  
Thanks well!!