Align position of multiple UIAxes objects

Hi there,

I'm creating an app with multiple UIAxes, but I cannot figure out how to align them vertically?

The ax.InnerPosition property is read-only, and exactly shows the position of the axis without labels and ticks.

Is there a workaround to get similar behaviour as for figures?

Regards Rasmus

Answer 1

[Adam Danz]

Open the app in apdesigner. Select all components that you'd like to align by holding down the ctrl button while you selected them. Then use the alignment tools at the top.

[ROL]

Hi Adam,

The alignment tools are only adjusting the ax.Position property and not the ax.InnerPosition property. I'm interested in the axes boxes to be aligned. Also, the axes are dynamically added and cannot be manually aligned.

[Adam Danz]

The image you shared is not appearing, for whatever reason.

Generally if the position of 2 axes match, then the inner position does, too. However, unequal size of tick labels or aspect ratio may results in equal position but unequal innerposition.

To align the inner position of 2 axes programmatically, you'll need to compute the innerposition relative to the position for each axes. For example,

Position InnerPosition InnerPosition-Positon

axis1 300 350 50 units from the left edge (or bottom)

axis2 310 370 60 units from the left edge (or bottom)

So, now you know that axis 2 Position needs to be shifted 10 units to the left (or down) relative to the axis1 position (60-50=10). Axis 1 position is at 300 so axis2 position needs to be at 290.

[ROL]

Yes, that is correct, but then I cannot use the UIGridLayout for the purpose of structing the axes. There is no padding property on the UIAxes object, but I might be able to add a dummy grid inside the main grid and then add a column of specific width corresponding to the InnerPosition-Positon difference.

Thanks for the answer

[Adam Danz]

First of all, good for you for designing the app manually rather than using appdesigner. You didn't mention you were using the UIGridLayout. As you said, the position, innerposition and outerposition cannot be altered when using the grid layout. An alternative is to use the grid layout to set up the app, write down the position of each component, and then stop using the grid layout and manually specify each component's position based on the dimensions you noted. Then you're free of that constraint.

[ROL]

The thing is, that I need to do ResizeCallbacks when the main figure size is altered, and this creates a lot of graphics flickering, which is less when using the grid layout. But of course it can be done and might be more flexible than using the grid.

[Adam Danz]

Yeah, what a hassle. I forgot that position units cannot be normalized with uifigures. This might be one of those times where the cost-benefit ratio is tilted toward just dealing with the unaligned inner-positions.

I never got to see your image attachment. What is causing the difference in inner position between the axes that have the same "position"?

[ROL]

The inner position is automatically adjusted according to the yticklabels. The once I had was from 0.00 to 3.00 and from 0.00 to 15.00, så a single digit more. Using a non-monospace font, I cannot just pad with spaces on the labels.

It might be a feature request for MathWorks to deal with for a later release.

[Adam Danz]

Have you tried using a monospaced font or have you tried rotating the labels 90 degrees?

[Adam Danz]

ytickformat() allows you to pad ticks with leading 0s. I haven't tried it on app designer but it's worth a shot.

https://www.mathworks.com/help/matlab/ref/ytickformat.html

[ROL]

The padding is an option, but I think using a non-monospaced font is prettier. However, it might be a fix to this issue until MathWorks support the setting of InnerPosition manually.

I'll try different solutions.