# Graph resizing incorrectly

**URL:** <https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [May 27, 2019, 12:34am UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327 "2019-05-27T00:34:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![georgia.webber](https://avatars.discourse-cdn.com/v4/letter/g/8dc957/32.png) [@georgia.webber](https://forum.inductiveautomation.com/u/georgia.webber)\
**Post date:** [May 27, 2019, 12:34am UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/1 "2019-05-27T00:34:23Z")

</div>

I recently started using Perspective in Ignition 8 and am noticing some strange behaviour with regards to window/graph resizing.

In the designer, my ‘Trends’ tab appears as:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4bb0d86e51cd67991a3c2070740a3581593729df.png)

However, in the web-browser, the ‘Trends’ tab looks like:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/39aae5e75043355661391d2b0a58d4a4f180bb34.png)

All of the graphs are squashed. Does anyone know what could be causing this? Its completely bizarre considering the web-browser is larger in both the x and y domains than the View.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 4, 2019, 5:58pm UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/2 "2019-06-04T17:58:09Z")

</div>

What sort of Container are you using?

If the XY Charts are in a Flex Container, and they have `position.grow` set to 1, then they will exhibit this behavior, because their container is growing to fill the View port and they’re growing to fill their parent.

Making a couple os assumptions here:  
The Container which the Tab Container resides in (from here on out TabParent) is either a Flex or Column Container, and the Tab Container is configured to always fill the parent.  
The Container which the XY Charts reside in (from here on out XYParent) is either a Flex or Column Container with props.direction set to “row”, and the XY Charts are configured to always fill the parent with two charts per row.  
So…  
TabParent(FlexContainer)  
\_\_TabContainer(`position.grow`=1)  
\_\_\_\_ImportantFlexContainer(`props.direction`=‘column’)  
\_\_\_\_\_\_XYParent\_1(`props.direction`=‘row’, `position.grow`=0)  
\_\_\_\_\_\_\_\_XYChart\_1(`position.grow`=1)  
\_\_\_\_\_\_\_\_XYChart\_2(`position.grow`=1)  
\_\_\_\_\_\_XYParent\_2(`props.direction`=‘row’, `position.grow`=0)  
\_\_\_\_\_\_\_\_XYChart\_3(`position.grow`=1)  
\_\_\_\_\_\_\_\_XYChart\_4(`position.grow`=1)

What it looks like is happening is:

1. You’re designing at some smaller display width (maybe 800px-100px).
2. The session is displaying at a much larger width (my monitor width is \>1900px).
3. TabParent is now ~1900px, so the Tab Container stretches to fill it.
4. The XYParent’s own parent (ImportantFlexContainer) must stretch to fill the space of the Tab, and so now XYParent stretches (WIDTH because `ImportantFlexContainer.props.direction` is “column”) to fill the parent, and so XYParent’s children also stretch to then fill XYParent; no vertical stretching takes place because `XYParent.position.grow`=0.

This is all a consequence of using Flex Containers. You get the responsiveness and ease of “flexing” to fill available space, but it means you’re on the hook for determining just how “flexy” something should be.

Setting `XYParent_1/XYParent_1.position.grow` to 1 will result in the charts expanding “downward” as well as to the right like you’re seeing. If you do not want them changing size at all, then you’ll need to set the `XYChart(1,2,3,4).position.grow` properties to 0.

---

<div class="post-metadata">

**Author:** ![georgia.webber](https://avatars.discourse-cdn.com/v4/letter/g/8dc957/32.png) [@georgia.webber](https://forum.inductiveautomation.com/u/georgia.webber)\
**Post date:** [June 5, 2019, 12:36am UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/3 "2019-06-05T00:36:50Z")

</div>

Hi @cmallonee,

Thanks for your response. Since the original post, I’ve made a number of modifications to the View. I now have four Flex Containers with two XY charts each. Interestingly, even though I’ve copy/pasted the Flex Containers to add these extra charts, the squishing only applies to two out of the four containers:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/bda31af056ed8c277b92a331551166c8ca5f4618.png)

Additionally, this only seems to be the case in Google Chrome - the charts are displaying correctly in Microsoft Edge and Firefox.

I have created a graphic showing my configuration of containers for the XY Chart tab:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/eec82d3db21b9d034cd4d150768daca5c52338f4.png)

I am using Ignition 8.0.1.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 5, 2019, 2:08pm UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/4 "2019-06-05T14:08:18Z")

</div>

Is there any chance you could pst theView in question in this thread, or could you send it to me via Direct Message? There’s no reason the four left-most Charts _should_ be “squishing”, unless something else is acting on them. The `position.grow` property essentially manages what happens when there IS available space. From the layout in the new screenshot, it appears that even though the Charts have the option to grow, there is something preventing them from doing so.

That’s not to say that there isn’t a bug here, but I can’t say for sure without looking at the contents of the View and their settings.

---

<div class="post-metadata">

**Author:** ![georgia.webber](https://avatars.discourse-cdn.com/v4/letter/g/8dc957/32.png) [@georgia.webber](https://forum.inductiveautomation.com/u/georgia.webber)\
**Post date:** [June 5, 2019, 9:54pm UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/5 "2019-06-05T21:54:42Z")

</div>

@cmallonee I have sent you the View via DM.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 6, 2019, 3:03pm UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/6 "2019-06-06T15:03:21Z")

</div>

I don’t seem to be encountering the issue, although I obviously don’t have the data backing my tables.

 ![15%20AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/7/77aef3e0de1d24b0c0bdaad027f922dc5361c61a.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 6, 2019, 3:13pm UTC](https://forum.inductiveautomation.com/t/graph-resizing-incorrectly/25327/7 "2019-06-06T15:13:45Z")

</div>

What you _could_ conceivably try is setting `position.shrink` to `0` for each of the tables. This would in essence prevent them from “shrinking” at all.
