App Designer Graphics Overview

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 this 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. But these functions depend on the HandleVisibility property of the parent figure being 'on', and the HandleVisibility property of App Designer figures is set to 'off' by default. This means that gcf and gca do not work as normal. As a result, omitting the argument for a target axes or parent object can produce unexpected results.

Depending on the graphics function you call, you might need to specify:

There are a number of ways to specify the target component for a graphics function. Some examples of the most common syntaxes are given below. To determine the correct target and syntax in your context, see the documentation for the specific graphics function you are using.

Display Graphics on Existing Axes

The most common way to display graphics in App Designer is to specify a UIAxes object on the App Designer canvas as the graphics function target. When you drag an axes component from the Component Library onto the canvas, this creates a UIAxes object in your app. The default name for an App Designer axes object is app.UIAxes. To determine or change the name of a specific axes on your canvas, select the axes component. Its name is listed and can be edited in the Component Browser

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

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

Display Graphics in Container

Some graphics functions display in a container component, such as a figure, panel, or grid layout, instead of an axes object. For example, the heatmap function has an optional first argument for specifying the container that the chart will display in.

Every App Designer app has a figure object, by default named app.UIFigure, that is a container for the components that make up the main app window. Specify app.UIFigure as the parent container argument to display graphics in the main app window. For example, to create a heat map in your app, use this syntax:

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

To further organize and compartmentalize graphics that take a parent container input argument, drag a container component such as a panel, tab, or grid layout from the Component Library onto the canvas. Determine the name of the component by selecting it and viewing its name in the Component Browser. You can then specify this container as the parent when you call the graphics function.

Other commonly used graphics functions that take a parent container as input include annotation, geobubble, parallelplot, scatterhistogram, stackedplot, and wordcloud.

Create Axes Programmatically

Some graphics functions plot data on specialized axes. For example, functions that plot polar data must do so on a PolarAxes object. Unlike UIAxes objects, which you can add to your app from the Component Library, you must add specialized axes to your app programmatically in your code. To create an axes object programmatically, create a StartupFcn callback for your app. Within it, call the appropriate graphics function and specify a parent container in your app as the target.

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

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

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)

Use Functions with No Target Argument

Some graphics functions, such as ginput and gtext, do not have an argument for specifying a target. 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

Use Functions That Don't Support Automatic Resizing

App Designer figures are resizable by default. This means that when you run an app and resize the figure window, components in the figure are automatically resized and repositioned to fit. However, some graphics functions do not support automatic resizing. To use these functions in App Designer, create a panel in which to display the output of the function and set the AutoResizeChildren property of the panel to 'off'. You can set this property in the Panel tab of the Component Browser or in your code.

For example, the subplot function does not support automatic resizing. To use this function in your app:

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

Other commonly used functions that do not support automatic resizing include pareto and plotmatrix.

For more information about managing resize behavior, see Alternatives to Default Auto-Resize Behaviors.

Unsupported Functionality

Some graphics functionality is not supported in App Designer. This table lists the unsupported functionality that is most relevant to app building workflows.