# How draw a graph with height and width given as a %

**URL:** <https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454>\
**Category:** plotly.js\
**Created:** [February 1, 2016, 2:30am UTC](https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454 "2016-02-01T02:30:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmek123](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@mmek123](https://community.plotly.com/u/mmek123)\
**Post date:** [February 1, 2016, 2:30am UTC](https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454/1 "2016-02-01T02:30:49Z")

</div>

I have a div already defined with "style:"width: **75%** ; margin-left: 2.5%; height: **75%** ; margin-top: 10px; margin-bottom: 10px;"  
I do Plotly.newPlot( xxxxxxxx,xxxxx,xxxx).

the gragh nicely comes in full width.

after some interactions in the page when i visit the graoh it has suddendly drawn in a area where height = 75 & width = 75…  
This is the same value i have given to the style as a “ **%** ”… ( when i change … it changes the size…)

How can we ask the svg container to take the size as a %… ? Im worried how its drawn in the first time but not in the second…

thanks…

---

<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:** [February 1, 2016, 3:09pm UTC](https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454/2 "2016-02-01T15:09:23Z")

</div>

Could you be more precise about:

> [@mmek123](#):
>
> after some interactions in the page

plotly.js is compatible with `<div>` elements specified in `%`.

See [Responsive / fluid layouts in JavaScript](https://plot.ly/javascript/responsive-fluid-layout/) for more details

---

<div class="post-metadata">

**Author:** ![mmek123](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@mmek123](https://community.plotly.com/u/mmek123)\
**Post date:** [February 2, 2016, 3:04am UTC](https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454/3 "2016-02-02T03:04:15Z")

</div>

we have two pages on the app… the graph is in the 1st page… and when we create the 2nd page it redraw the 1st page and 2nd page both…

the result is the graph is plotted in a 75px \* 75px area…

---

<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:** [February 5, 2016, 2:07pm UTC](https://community.plotly.com/t/how-draw-a-graph-with-height-and-width-given-as-a/454/4 "2016-02-05T14:07:26Z")

</div>

> [@mmek123](#):
>
> we have two pages on the app.

Could you share a code snippet, ideally on codepen or jsFiddle?