Documentation

Call Graphics Functions

Many of the graphics functions in MATLAB (and MATLAB toolboxes) have an argument for specifying the target axes or parent object. This argument is optional in most contexts, but when you call these functions in App Designer, you must specify that argument. The reason is that, in most contexts, MATLAB defaults to using the gcf or gca functions to get the target object for an operation. However, the HandleVisibility property of App Designer figures is set to 'off' by default. This means that gcf does not return an App Designer figure, and gca does not return any axes within an App Designer figure. As a result, omitting the argument for a target axes or parent object can produce unexpected results.

This code shows how to specify the target axes when plotting two lines. The first argument passed to plot and hold is app.UIAxes, which is the default name for the App Designer axes.

plot(app.UIAxes,[1 2 3 4],'-r');
hold(app.UIAxes);
plot(app.UIAxes,[10 9 4 7],'--b');

Similarly, you can specify the target figure by specifying the first argument as app.UIFigure. For example, this code creates an arrow annotation in the App Designer figure.

x = [0.3 0.5];
y = [0.6 0.5];
annotation(app.UIFigure,'arrow',x,y)

Some functions (such as imshow and triplot) use a name-value pair argument to specify the target object. For example, this code shows how to call the imshow function in App Designer.

imshow('peppers.png','Parent',app.UIAxes);

The ginput and gtext functions do not have an argument for specifying the target figure. As a result, you must set the HandleVisibility property of the App Designer figure to 'callback' or 'on' before calling these functions. After you call these functions, you can set the HandleVisibility property back to 'off'. For example, this code shows how to define a callback that allows you to identify the coordinates of two points using the ginput function.

function pushButtonCallback(app,event) 
    app.UIFigure.HandleVisibility = 'callback';
    ginput(2)
    app.UIFigure.HandleVisibility = 'off';
end

Some functions do not support automatic resize behavior, including pareto, plotmatrix, and subplot. Before using these functions, set the AutoResizeChildren property of the parent container to 'off'.

app.UIFigure.AutoResizeChildren = 'off';
pareto(app.UIAxes,[10 20 40 40])

Display Plots Using Other Types of Axes

You can create most 2-D and 3-D plots using the App Designer axes (a uiaxes object). Starting in R2018b, you can create additional plots, such as those listed in the following table. Most of these plots require a different type of parent object and additional lines of code in your app. All of them use normalized position units by default.

theta = 0:0.01:2*pi;
rho = sin(2*theta).*cos(2*theta);
pax = polaraxes(app.Panel);
polarplot(pax,theta,rho)

M = randn(20,20);
Z = eig(M);
app.Axes = axes(app.Panel);
compass(app.Axes,Z)

app.UIFigure.AutoResizeChildren = 'off';
ax1 = subplot(1,2,1,'Parent',app.UIFigure);
ax2 = subplot(1,2,2,'Parent',app.UIFigure);
plot(ax1,[1 2 3 4])
plot(ax2,[10 9 4 7])

t = tiledlayout(app.Panel,2,1);
[X,Y,Z] = peaks(20)

% Tile 1
ax1 = nexttile(t);
surf(ax1,X,Y,Z)

% Tile 2
ax2 = nexttile(t);
contour(ax2,X,Y,Z)

h = heatmap(app.UIFigure,rand(10));

latSeattle = 47 + 37/60;
lonSeattle = -(122 + 20/60);
gx = geoaxes(app.UIFigure);
geoplot(gx,latSeattle,lonSeattle)

Unsupported Functionality

As of R2020b, some graphics functionality is not supported in App Designer. This table lists the functionality that is relevant to most app building workflows.