XY Chart margin causes scrollbars to appear in view

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.

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.

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


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

That makes sense.

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

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.

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

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)

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.

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

1 Like

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.

1 Like