XY Chart margin causes scrollbars to appear in view

Ignition
1

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
XY Chart scroll bar1034×549 62.6 KB

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.

2

Try adding an overflow style prop, and set it to hidden:
image

image

3

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, that something has got messed up in 8.1.22.

I'll try and attract the attention of the IA staff.

1 Like
4

That makes sense.

5

does this happen in the browser too or just the designer?

6

Chart margin problem
Chart margin problem747×435 37.8 KB

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.

7

Heh, you can use padding instead of margin.
(got a green background on the flexcontainer)

image
image786×208 15 KB

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)

8

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.

9

Then you'll have to wrap both charts into an other container with the margin/padding on that one

1 Like
10

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.

2 Likes