# Perspective XYChart appears different in Perspective Workstation

**URL:** <https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 28, 2024, 1:24pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257 "2024-08-28T13:24:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 28, 2024, 1:24pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/1 "2024-08-28T13:24:23Z")

</div>

I have an XYChart in perspective. When running the app in a browser the chart appears as it does in the designer but when running the app in perspective workstation, the chart is squashed. Does anybody know what might be causing this/how to fix it?  
In Browser:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/dbb8f60bba3e33b8be57eec0d5d72eca5002e1e8.png)  
In Perspective Workstation:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/213aad9673840fd65b1948d6575f34432b97b6bf.png)

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 28, 2024, 3:23pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/2 "2024-08-28T15:23:17Z")

</div>

I think I have some ideas about what the issue may be. As you can maybe see in the screenshots the graph is inside a tab container. In the browser this turns into something that starts like this:

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

If I disable the `style="flex: 1 0 calc(100% - 36px);"` attribute from the highlighted element then the graph appears as it does in the workstation. I've looked on [caniuse.com](https://caniuse.com/calc) and it seems calc() has been supported for a very long time in most browsers so I can only assume the browser the workstation is wrapping also does but could it be the case that it doesn't? Is there any way to open the inspector within the workstation to check?

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [August 28, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/3 "2024-08-28T15:33:42Z")

</div>

What type of root container are you using?

And sadly you cannot look at the HTML in the Designer itself. You have to do it how you are currently doing it, using the dev mode on the Perspective Session.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 28, 2024, 3:40pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/4 "2024-08-28T15:40:33Z")

</div>

It's a flex container.

Yeah, I'm aware that you can't see the HTML in the designer but I'm trying to find out if there's a way to see it in Perspective Workstation's wrapped browser.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 28, 2024, 3:41pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/5 "2024-08-28T15:41:00Z")

</div>

Workstation is currently using a quite old version of Chromium because the makers of the embedded browser library we use couldn't fix a bug we found on Linux. That appears to finally be fixed, so we should finally be able to upgrade Workstation's embedded browser in the next 8.1 version - assuming QA doesn't find anything _else_ that's wrong.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 28, 2024, 3:44pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/6 "2024-08-28T15:44:45Z")

</div>

How old are we talking? Allegedly calc() has been supported since pretty old versions of Chrome and Edge so I think it's probably going to be supported but I'm running out of ideas.

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [August 28, 2024, 3:53pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/7 "2024-08-28T15:53:49Z")

</div>

Oh I see, I apologize. From what I gathered from PGriffith said, you can't look at those properties in the Workstation.

Can you show what your settings are for your Flex Container? and how the Tab Container is being positioned in the Root Container?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 28, 2024, 3:53pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/8 "2024-08-28T15:53:56Z")

</div>

Chromium 84, specifically. So, yeah, maybe not `calc()`, but could be some other rendering behavior. Browsers are an approximately infinite surface.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 28, 2024, 4:01pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/9 "2024-08-28T16:01:42Z")

</div>

Yeah, I've done some reading that seems to suggest in the past there were restrictions on the expressions you could put inside `calc()` but I think they're unlikely to be the problem either. Very odd.

Zachary, my flex container is configured like so:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e62915a7fefcdf171fd783fe9c17bef3480889e7.png)  
(The position tab is empty)

and the tab container like so:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1c14c805495ae2cf17b81141d23be2093d350650.png)

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [August 28, 2024, 4:16pm UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/10 "2024-08-28T16:16:42Z")

</div>

Thank you! I think I understand what's happening here.

If you look at the documentation on [Flex Containers, under section Child Component Flex Properties](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-container-palette/perspective-flex-container#child-component-position-properties), there is the Basis Property.

Because you're using a Column Flex Container it is using the Basis for the height of your Tab Container.

On the designer it might look like it's taking up the full height of your View, I imagine you probably have the view height similar to the basis of your Tab Container. Thus, taking on the appearance of filling the entire space.

One thing you can do is set that basis to be a percentage. So that it would always take the same percentage of height. No matter the size of the viewport. In the case of a Row Flex Container it would take the percentage of Width.

So by changing the basis to 100% your Tab Container, it will now fill that entire space.

Hope that helps!

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [August 29, 2024, 7:46am UTC](https://forum.inductiveautomation.com/t/perspective-xychart-appears-different-in-perspective-workstation/95257/11 "2024-08-29T07:46:38Z")

</div>

Okay perfect, that seems to have fixed it! It's still odd though because it wasn't just the designer it was taking up the full height of the view but also when I was running a session in a browser, the only place it wasn't taking up the full view was in the perspective workstation browser. Either way, I'll take the fix, thanks 🙂
