Display Graphics in App Designer

Displaying graphics in App Designer requires a different workflow than you typically use at the MATLAB^® command line. Once you understand this workflow and a few special cases, you will know how to call the functions you need for displaying almost any type of plot.

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');

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);

Whether you specify the target object as the first argument or a name-value pair argument depends on the function. See the documentation for the specific function you want to use to determine the appropriate arguments.

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.

Functions	Coding Details
`polarplot` `polarhistogram` `polarscatter` `compass`	Create the polar axes by calling the `polaraxes` function. Specify the parent container as the first input argument (for example, `app.Panel`). Then call the plotting function with the polar axes as the first argument. For example: theta = 0:0.01:2pi; rho = sin(2theta).cos(2theta); pax = polaraxes(app.Panel); polarplot(pax,theta,rho) Or, create a compass plot in a similar way: rng(0,'twister') M = randn(20,20); Z = eig(M); app.Axes = axes(app.Panel); compass(app.Axes,Z)
`subplot`	Follow these steps: Set the `AutoResizeChildren` property of the parent container to `'off'`. Subplots do not support automatic resize behavior. You can set this property in the App Designer Inspector tab of the Component Browser or in your code. Specify the parent container using the `'Parent'` name-value pair argument when you call `subplot`. Also, specify an output argument to store the axes. Call the plotting function with the axes as the first input argument. For example: 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])
`tiledlayout`	Create a tiled chart layout in a panel and 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)
`pareto` `plotmatrix`	Follow these steps: Set the `AutoResizeChildren` property of the parent container to `'off'`. These plots do not support automatic resize behavior. You can set this property in the App Designer Inspector tab of the Component Browser or in your code. Create the axes by calling the `axes` function. Specify the parent container as the first input argument (for example, `app.UIFigure`). Call the `pareto` or `plotmatrix` function with the axes as the first input argument. For example: app.UIFigure.AutoResizeChildren = 'off'; ax = axes(app.UIFigure); pareto(ax,[10 20 40 40])
`geobubble` `heatmap` `parallelplot` `scatterhistogram` `stackedplot` `wordcloud`	Specify the parent container when calling these functions (for example, `app.UIFigure`) . For example: h = heatmap(app.UIFigure,rand(10));
`geoplot` `geoscatter` `geodensityplot`	Create the geographic axes by calling the `geoaxes` function. Specify the parent container as the first input argument (for example, `app.UIFigure`). Then, call the plotting function with the axes as the first input argument. For example: latSeattle = 47 + 37/60; lonSeattle = -(122 + 20/60); gx = geoaxes(app.UIFigure); geoplot(gx,latSeattle,lonSeattle)

Display Annotations in App Designer Figures

Starting in R2020a, annotations created with the annotation function are supported in App Designer figures. To create an annotation, call the annotation function, specifying the UI figure as the first input argument. For example:

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

Unsupported Functionality

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

Category	Not Supported
Animation	For example, `movie`, `getframe`.
Retrieving and Saving Data	For example, `hgexport`, `hgload`, `hgsave`, `save`, `load`, `savefig`, `openfig`, and `saveas`. Instead of the `saveas` function, use the `exportgraphics` or `copygraphics` functions to save graphics in an app. Figures created programmatically with `uifigure` do support the `save`, `load`, `savefig`, and `openfig` functions.
Utilities	`findfigs`, `gco`, `clf`, `print`, `ginput`, `gtext`. Instead of the `print` function, use the `exportgraphics` or `copygraphics` functions to save graphics in an app.
Functions not Recommended	For example, `ezplot` and `hist`.
Axes in Grid Layout Managers or Scrollable Containers	Grid layout managers and scrollable containers do not support `axes`, `polaraxes`, `geoaxes`, or charts (such as `heatmap`, `geobubble`, or `stackedplot`) that can be the child of a figure. `uiaxes` does not have these limitations. Workarounds: To work around the grid layout manager limitation, place the axes or chart into a panel with the `AutoResizeChildren` property set to `'off'`. Then, place the panel into the grid. To work around the scrollable container limitation, place the axes or chart into a panel with the `Scrollable` and `AutoResizeChildren` properties set to `'off'`. Then, place the panel into the scrollable container.
Properties	Components objects like `Table`, `Menu`, `Panel`, `Tab`, `TabGroup`, and `ButtonGroup` support different properties in App Designer than in apps created with the `figure` function. For a list of components supported in App Designer and links to their properties pages, see App Building Components.

Documentation