Charts

Visualize data in colorful charts.

Charts add eye-catching graphics to your apps to help users visualize their data and see it from a different perspective. You can even present multiple charts side-by-side using a Container Component.

Use case of the Chart component.

Adding and Setting Up a Chart Component

  1. In the Layout Editor, select the tab you want to add the chart to.

  2. Click on the plus (+) symbol in the Components panel.

  3. Select the desired chart style (Bar Chart, Line Chart, or Radial Chart).

Data

Select a Data Source for your chart in the configuration panel on the right of the Layout Editor. This can be a table from your app's data source or a Relation. You can also give your chart a Title to make it clear what data is being displayed.

If you've selected a Bar or Line chart, you'll see a Style section that allows you to change the chart type and switch between the two.

Content

Select a column to use as the Label (if a radial chart) or X-Axis (if a linear chart). This determines what values the data is grouped by. This will appear at the bottom of the chart and in floating hints when users hover over the chart.

Select a column to use as the Value. This determines the bar height or line direction. You can also name the graphs using the Caption field.

Click the Add item button to display additional values from the chart's data source.

Design

Depending on the style you've chosen, you can customize what is displayed on the chart (i.e. Show x labelsShow y labelsShow grid linesShow legend, etc.).

For each chart style, you can also Limit number of items displayed or adjust the Page size.

Options

You can customize the data displayed in your chart by using Conditions and other options.

Visibility

You can define when your chart will be displayed by creating specific conditions to be met. In the Visibility section, click the Add Condition button to create your conditions.

Filter data

You can limit the items displayed in your chart. In the Filter Data section, click the Add Filter button to create your filters.

Sort data

By default, chart data will appear in the same order as they appear in its data source. However, if you are using a Bar chart, you can customize the legend's sort. In the Sort section, click on the Sort by Sheet order field to expand the options and configure it.

Other Options

You can enable the Show search bar option so users can search the chart items more quickly. You can also configure the In-App Filter property to allow users to find specific data in the chart.

Walkthrough

Suppose you have a table which shows orders for a shop. You've added a radial chart and selected Orders as the Label. You've left the Values blank.

Customer

Orders

Count

Sam Smith

Apple Pie Muffin

20

Lana Del Ray

Bread Pudding

1

Barry Manilow

Honey Chia

8

Freddy Mercury

Apple Pie Muffin

3

If the Label property is the only option configured, the chart will display the total number of orders placed, grouped by the values in the Orders column.

If you select the Count column as the Values property, then the chart changes significantly. Now the chart shows how many of that particular item were ordered.

Have a question about Charts? Ask the Glide community.

Updated more than a week ago
Was this article helpful?