Display Graphics in App Designer

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:

• A UIAxes component on the canvas

• A parent container in your app

• An axes component that you create programmatically in your app code

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

Specify Axes as First Argument

Many graphics functions have an optional first input argument to specify the target axes object. For example, both the plot function and the hold function take a target axes object in this way. To plot two lines on a set of axes on the canvas, specify the name of the axes object as the first argument to each function you call.

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

Specify Axes as Name-Value Argument

Some graphics functions require the target axes object to be specified as a name-value argument. For example, when you call the imshow and triplot functions, specify the axes object to display on using the 'Parent' name-value argument. This code displays an image on an existing set of axes on your canvas:

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.

Plot on Polar Axes

Functions such as polarplot, polarhistogram, and polarscatter take a polar axes object as a target. Create a polar axes programmatically by calling the polaraxes function. For example, to plot a polar equation in a panel, first drag a panel component from the Component Library onto your canvas. In the code for your app, create the polar axes object by calling the polaraxes function and specifying the panel as the parent container. Then, plot your equation with the polarplot function, specifying the polar axes as the target axes.

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

Plot on Geographic Axes

Functions such as geoplot, geoscatter, and geodensityplot take a geographic axes object as a target. Create a geographic axes programmatically by calling the geoaxes function. For example, to plot geographic data in a panel, use the following code:

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

Create Tiled Chart Layout

To tile multiple charts using the tiledlayout function, create a tiled chart layout in a panel and programmatically create axes in it using the nexttile function. Return the axes object from the nexttile function and use it to specify the axes for your charts or plots.

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:

1. Drag a panel component from the Component Library onto your canvas.

2. Set the AutoResizeChildren property of the panel to 'off'.

3. Specify the panel as the parent container using the 'Parent' name-value argument when you call subplot. Also, specify an output argument to store the axes.

4. Call the plotting function with the axes as the first input argument.

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.

Category	Not Supported
Retrieving and Saving Data	These functions are not supported: hgexport, hgload, hgsave, save, load, savefig, openfig, and saveas, and print. Instead of the saveas or print functions, use the exportapp function to save the content of an app window. To save plots in an app, use the exportgraphics or copygraphics functions. Figures created programmatically with uifigure do support the save, load, savefig, and openfig functions.
Web Apps	If you are using App Designer to create a deployed web app (requires MATLAB Compiler™), additional graphics limitations apply. For more information, see Web App Limitations and Unsupported Functionality (MATLAB Compiler).