# XY Chart margin causes scrollbars to appear in view **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 29, 2022, 9:58pm UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845 "2022-10-29T21:58:26Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [October 29, 2022, 9:58pm UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/1 "2022-10-29T21:58:26Z")
Version 8.1.22. I have a style class with 8 pixel margin and when I apply this to an XY Chart in a flex view it shifts right by 8 px but the right edge moves off the view and the horizontal scrollbar appears. ![XY Chart scroll bar](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e591267d1ab349b105117412384352407ef77b1.png) Is this a bug or am I doing something wrong? I seem to remember a post on the topic in the past few months but I can't find it. * * * For anyone interested, we created an application to display a table of the top 100 tags per hour in the historian. It threw up some very badly configured tag history settings which we tackled resulting in a drop from 16 G/month to a bit over 1 GB/month. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [October 30, 2022, 8:25am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/2 "2022-10-30T08:25:04Z")
Try adding an overflow style prop, and set it to hidden: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/aef89cf8560717172c157e81d17b5c1cebebe8d9.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d0a83210338a748815758c11fc92c12fd93d1ff0.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [October 30, 2022, 12:28pm UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/3 "2022-10-30T12:28:17Z")
Hmm, that's just burying the problem, I think. I have a border on the chart and that gets shoved out to the right so `overflow : hidden` causes the right edge of the border to disappear. I suspect that with this and my other quesion, [Perspective table header alignment - is there a problem? - #4 by justinedwards.jle](https://forum.inductiveautomation.com/t/perspective-table-header-alignment-is-there-a-problem/65833/5), that something has got messed up in 8.1.22. I'll try and attract the attention of the IA staff. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [October 30, 2022, 12:52pm UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/4 "2022-10-30T12:52:40Z")
> [@Transistor](#): > > that something has got messed up in 8.1.22 That makes sense. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 31, 2022, 9:22am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/5 "2022-10-31T09:22:06Z")
does this happen in the browser too or just the designer? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [October 31, 2022, 9:58am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/6 "2022-10-31T09:58:35Z")
![Chart margin problem](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea3c6840609d8f88d11206fe4ae1604af4a9400f.png) It happens in Designer (where the chart outline handles can be seen off the right side of the view) and in Chrome and Edge browsers. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 31, 2022, 10:22am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/7 "2022-10-31T10:22:34Z")
Heh, you can use padding instead of margin. (got a green background on the flexcontainer) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5ce33fa3f20c31a572b5d17b0581046e544ec398.png) You could also change the flex direction (column/row) to match the direction of the margin (doesnt work if you have margin in all directions) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [October 31, 2022, 10:40am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/8 "2022-10-31T10:40:07Z")
> [@victordcq](#): > > you can use padding instead of margin Sure, but then I lose my nice solid border. I have two charts on the view and a border on each with an 8 px margin outlines them nicely. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 31, 2022, 10:46am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/9 "2022-10-31T10:46:43Z")
Then you'll have to wrap both charts into an other container with the margin/padding on that one ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [October 31, 2022, 4:45pm UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/10 "2022-10-31T16:45:15Z")
Set `width: auto`. We set the width and height to "100%" internally, expecting it to be overridden by the parent container. I believe this is something we do to prevent components with no internal dimensions from shrinking to oblivion when in a container that uses the flex-model. From what I recall, it is a bit of a balance to get the behavior right. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 25, 2025, 1:51am UTC](https://forum.inductiveautomation.com/t/xy-chart-margin-causes-scrollbars-to-appear-in-view/65845/11 "2025-03-25T01:51:35Z")
where do I set the width to auto?