# Easy Chart Layout

**URL:** <https://forum.inductiveautomation.com/t/easy-chart-layout/44007>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [March 2, 2021, 11:43pm UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007 "2021-03-02T23:43:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rrebro](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rrebro](https://forum.inductiveautomation.com/u/rrebro)\
**Post date:** [March 2, 2021, 11:43pm UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007/1 "2021-03-02T23:43:40Z")

</div>

Long Story Short I have an XY chart ontop of an easy chart, such that the historical range selection can be seen from the easy chart but the graph is the XY chart. When I go to view the two in the vision client, the easy chart is resized to show some of its chart that I am trying to hide behind the XY chart. I’ve tried every combination of relative and anchored layout options, I just want the view from my designer resized at any size.

---

<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:** [March 2, 2021, 11:54pm UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007/2 "2021-03-02T23:54:51Z")

</div>

Not to be contrarian, but why not just put a [Date Range](https://docs.inductiveautomation.com/display/DOC81/Vision+-+Date+Range) component directly? I don’t think you’ll ever have a great time trying to overlap components like you’re trying to do. If I _had_ to do it, I think that if both charts were in a group and the overlay chart was fixed on all 4 sides (at the correct manually-provided offset from the bottom) then the layout should stay _about_ correct as you resize the group.

---

<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:** [March 3, 2021, 12:05am UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007/3 "2021-03-03T00:05:31Z")

</div>

For posterity: It looks like there’s a bug with _groups_ (probably been there for years), and a UI deficiency, that makes this harder to achieve than it needs to be (still not a good idea, though…)  
So, instructions:

1. Put your two charts at the top-left corner of a window.
2. Overlay them, making sure the XY Chart is ‘on top’.
3. Select them, make them a group.
4. Convert the group to a container.
5. Edit the Easy Chart:
  - Make sure the Easy Chart is filling the whole container.
  - Open the layout settings, and in the ‘Relative’ options, _disable_ ‘Scale Font’ and ‘Maintain aspect ratio’.
  - Switch the layout to ‘Anchored’ and pin all four sides.

6. Edit the XY Chart:
  - Make sure it’s set to fill the left/top/right, and the correct distance from the bottom of the container.
  - Open the layout settings, and in the ‘Relative’ options, _disable_ ‘Scale Font’ and ‘Maintain aspect ratio’.
  - Switch the layout to ‘Anchored’ and pin all four sides.

Et voila:  
 ![FrxdRZIWbH](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/12b485d2fcb05a9a37a2e839e7937f8e0f53c3f3.gif)

---

<div class="post-metadata">

**Author:** ![rrebro](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rrebro](https://forum.inductiveautomation.com/u/rrebro)\
**Post date:** [March 3, 2021, 12:10am UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007/4 "2021-03-03T00:10:38Z")

</div>

I will give this a try, the idea is I am graphing Torque Vs Angle in an XY chart but I want to use the date selector. Since we have similar X Vs Time charts that show red lines where there is data, I created an easy chart that plots the torque vs time so I can have the range selector but also those red lines that indicate data.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 3, 2021, 5:11am UTC](https://forum.inductiveautomation.com/t/easy-chart-layout/44007/5 "2021-03-03T05:11:18Z")

</div>

> [@rrebro](#):
>
> I created an easy chart that plots the torque vs time so I can have the range selector but also those red lines that indicate data.

The Date Range component has the capability to show the “red lines” also called the data density. If you follow the link @paul-griffith provided it tells you how to achieve this. Then you don’t have to jump through the hoops to hide a component.

Also, having two charts that are loading historical data is not helping performance.
