The App Maker editor and user apps will be shut down on January 19, 2021. New application creation is disabled. Learn more


Charts use the Google Visualization API to visually represent your app's data. Charts use a creation wizard, similar to the wizard for form and table widgets. The wizard asks you to choose fields for labels and values to chart. In the Property Editor, data to chart is displayed in the Columns property group. Each column (or equivalent, for example, wedges for a pie chart) has a data property that takes an array as input and builds a chart from it.

Because columns' data properties require arrays, it's often helpful to use projections to create an array from a datasource's items list. For example, in a model with records representing annual historical income tax rates, you could bind a Data column's data property to @datasource.items..TaxRate, which returns an array that contains the TaxRate property of every item in the datasource. Similarly, you could bind the Label column's data property to @datasource.items..Year to display the year of each tax rate.


Drag a chart onto the page and use the Property Editor to configure its text, appearance, and the data it will display.


Use chartTitle, chartColors, and other properties in the Property Editor to customize the look of your chart.


The Charts sample shows how to use Bar, Table, and Pie Charts.

Additional information

The Widget API has more information about styles, properties, methods, and events for Charts: