# Responsive doesn't fill the entire parent

**URL:** <https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778>\
**Category:** plotly.js\
**Created:** [March 12, 2019, 2:02am UTC](https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778 "2019-03-12T02:02:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohamedmansour](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mohamedmansour/32/5881_2.png) [@mohamedmansour](https://community.plotly.com/u/mohamedmansour)\
**Post date:** [March 12, 2019, 2:02am UTC](https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778/1 "2019-03-12T02:02:20Z")

</div>

Hello,

I am trying to figure out if plot.ly will work for our organization, so I am looking at a few charting libraries. My objective is to let the chart fill up the region of the parent. No whitespace at all. If it can’t do that, the chart size could be smaller to respect its aspect ratio.

I have already searched for existing solutions on how to make the responsive charts. In this example, my parent could be 400px by 250px. Right now it adds lots of whitespace, and for some reason, the labels are not part of the graph structure.

**CodePen Attempt 1**

From what I have read in the documentation my initial attemp was using the `responsive` config option:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/a5b1676c2732fcab479fe44a1bbe81665385ba2a.png)  
[https://codepen.io/mohamedhmansour/pen/OqxgKK?editors=0110](https://codepen.io/mohamedhmansour/pen/OqxgKK?editors=0110)

**CodePen Attempt 2**

Then I was trying `autosize` from the docs, same issue:

[https://codepen.io/mohamedhmansour/pen/NJavwb?editors=0110](https://codepen.io/mohamedhmansour/pen/NJavwb?editors=0110)

**CodePen Attempt 3**

Then I was reading more, and people started using the `margin` layout property, looks weird, all the labels are cut:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/97628385ec3ba0880847d30f5768e112fb5364b0.png)  
[https://codepen.io/mohamedhmansour/pen/wOrqyW](https://codepen.io/mohamedhmansour/pen/wOrqyW)

**CodePen Attempt 4**

If I know the margins exactly, then I can set it this way:

[https://codepen.io/mohamedhmansour/pen/KEXvBX](https://codepen.io/mohamedhmansour/pen/KEXvBX)

**CodePen Attempt 5**  
Then there is `automargin` which sounds perfect, but that doesn’t work at all, doesn’t respect the parent size.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7661c61a4933fb53bddbf3d2329a255206cadb9e.png)  
[https://codepen.io/mohamedhmansour/pen/VRMzRw?editors=0110](https://codepen.io/mohamedhmansour/pen/VRMzRw?editors=0110)

**Some questions:**

1. How could we perfectly fit the chart in the space allocated, no whitespace anywhere, without playing with margins?
2. Is there a way to figure out the width of the labels on the left, top, right, and bottom, so we could apply the margins programmatically?

Thanks!

---

<div class="post-metadata">

**Author:** ![mohamedmansour](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mohamedmansour/32/5881_2.png) [@mohamedmansour](https://community.plotly.com/u/mohamedmansour)\
**Post date:** [March 13, 2019, 12:29am UTC](https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778/2 "2019-03-13T00:29:56Z")

</div>

I am trying out highcharts as well, and for my attempt 1, it was working as expected.

**CodePen Attempt 1 HighCharts**  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/40c95ac6396f78e8ef375d70f36dc0eb0ab13fc4.png)  
https://codepen.io/mohamedhmansour/embed/preview/LaOQPv?height=300&slug-hash=LaOQPv&default-tabs=js,result&host=https://codepen.io

If there is a solution for above for plotly, I would give it a try again.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [March 18, 2019, 4:48pm UTC](https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778/3 "2019-03-18T16:48:40Z")

</div>

Here’s the “right” way: [https://codepen.io/etpinard/pen/gEKNeb](https://codepen.io/etpinard/pen/gEKNeb)

It’s a little cumbersome right now unfortunately; we’re planning on polishing that up in the v2 release.

---

<div class="post-metadata">

**Author:** ![thehappycoder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/thehappycoder/32/10892_2.png) [@thehappycoder](https://community.plotly.com/u/thehappycoder)\
**Post date:** [May 19, 2020, 10:29pm UTC](https://community.plotly.com/t/responsive-doesnt-fill-the-entire-parent/20778/4 "2020-05-19T22:29:26Z")

</div>

@etienne the chart gets out of borders of its parent

 ![Screen Shot 2020-05-20 at 8.28.33 am](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/3868116c54a8db25aaa4b0fde2c6e97bd4925aa0.png)

What I realised when I played with Plotly, is that it’s OK when it’s parent’s width is set in pixels. Once I set the width of a parent in %, it breaks. Edit: actually that is the case only when I try to render plotly plot in jsreport to a PDF.