This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

Note: This page has been translated by MathWorks. Please click here
To view all translated materials including this page, select Japan from the country navigator on the bottom of this page.

Graphics Support in App Designer

The types of charts your app can support depend largely on the kind of figure that underlies the UI. Apps you create using GUIDE and apps you create programmatically using the uicontrol function use traditional figures and axes. These apps support all of the graphics functionality available in MATLAB®.

Apps you create using App Designer are based on a new kind of figure, called a UI figure. To display graphics in these apps, you must use a new type of axes, called UI axes.

UI figures and UI axes are similar to traditional figures and axes, but there are some important differences to be aware of when deciding how to build your app.

Support for Graphics Functions

Starting in R2017b, UI figures and UI axes support the following functionality:

However, the following functionality is not supported:

CategoryFunctions Not Supported
Charting and Animation


Annotations and Colormap Adjustmentsannotation
Retrieving and Saving Datahgexport

gca, gcf, gco, gcbf, gcbo


See Graphics Support in App Designer (R2016a - R2017a) for a list of graphics functions supported in earlier releases.

How to Call Graphics Functions

In general, when you call a function within App Designer that accepts a target axes or figure, you must specify that argument as the UI axes or UI figure. Otherwise, MATLAB assumes gcf or gca is the target. However, gcf and gca cannot return UI figures and UI axes, so omitting them might lead to unexpected results.

This code shows how to plot two lines in App Designer. The first argument passed to plot and hold is app.UIAxes, which is the default name that App Designer assigns to the UI axes.

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

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


Searching for objects also requires the target input argument. This code finds a UIAxes object whose XLim property is [0 1]. The search begins with the Figure object specified as app.UIFigure.

ax = findobj(app.UIFigure,'XLim',[0 1]);

Support for Properties and UI Components

If you are moving code you wrote in previous releases into App Designer, you might encounter these limitations:

  • UI figures support a subset of the properties that traditional figures support. For example, UI figures do not support properties for printing, saving, or custom mouse and keyboard interaction. For a full list of supported properties, see UI Figure Properties.

  • UI axes support a subset of the properties that traditional axes support. For example, UI axes do not support properties for interactive control. For a full list of supported properties, see UIAxes Properties.

  • UI figures support a different set of interactive components than traditional figures do. For example, UI figures do not support components created with the uicontrol or uitoolbar functions. For a full list of supported components, see Components in App Designer.

  • Some components support a subset of properties when you place them in UI figures. For example, Table UI components do not support the Extent property in UI figures. For a list of supported properties for a particular component, see its property page on Components in App Designer.

See Also


Related Topics

Was this topic helpful?