We use cookies to improve our service. Learn more.

Reference / Components

Charts

Visualize data in colorful charts.

The Charts Component is available in both Apps and Pages, but configuration options may differ slightly.

Charts are a great way to quickly add eye-catching graphics to your projects to help the user see their data visually and from a different perspective. Glide provides many chart options, whether your project is a Glide App or a Glide Page.

In Apps

When you add a Chart component in Apps, you can select between several styles and options.

Data

Select a source for your chart’s data. This could be a table in your Data Source or a Multiple Relation. You can also give the chart a Title and Caption to provide more clarity. As soon as you choose the source, the chart will automatically present your data, but further customization is almost always needed.

Style

In Apps, you can select from the following styles:

  • Donut
  • Pie
  • Bar
  • Stack

Contents

Next, configure the Label and Quantity properties so the chart displays the data as intended. The Label determines how the data is grouped in the legend, and the Quantity is used to calculate the totals for each group.

Bar charts allow you to add multiple quantities so that you can provide more insight to your users.

Design & Options

Select a Color Theme for your chart to make trends stand out. You can also uncheck Show legend by default if you’d like the legend to only appear when the Info icon is tapped. Other design options include:

  • Show labels on bars
  • Show total in center

If consistent branding is ideal for your project, consider using the Turrell color theme. It automatically matches the Color you’ve selected in your project’s Appearance settings.

For each chart style, you can check Limit number of items if you’re wanting to show top trends or need to save screen space.

In Pages

In Pages, charts are larger and more powerful than in Apps. You can even present them side by side using a Container.

How to add a Chart component

  1. In the Layout Editor, select the page from the Pages panel you want to include a chart on.
  2. Click on the plus symbol in the Screen panel.
  3. In the Insert Component panel, select the desired chart style (Bar Chart, Line Chart, or Radial Chart) from the Content section.

Data

Select a data source ****for your chart. This could be a table from your project’s data source ****or a Multiple Relation. You can also give your chart a Title to provide clarity for your users.

If you’ve selected a Bar or Line chart, you’ll see a Style section that allows you to change the chart type.

Content

Select a column to use as the Label or X-Axis. This determines what data is grouped by (similar to the Label property for charts in Apps). This will appear at the bottom of the screen and in the floating hints that appear when users hover over the chart.

Select a column to use as the Value. This determines the bar height or line direction (similar to the Quantity property for charts in Apps).

Click the + Add item button to display additional values from the chart’s data source next to or stacked with the first Item (or value).

Design

Depending on the style you’ve chosen, you can customize what is displayed on the chart (i.e. Show x labels, Show y labels, Show grid lines, Graph Style, Line Weight, 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.

For more information, see Visibility 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.

For more information, see the Filter documentation.

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.

For more information, see the Sort documentation.

Other Options

In Pages, you can enable the Show Search bar option so users can search the chart items more quickly. You can also configure the Show Filter property to allow users to view the chart information differently.

Walkthrough

Suppose you have a table which shows orders for a shop. You’ve added a Donut style chart and selected Orders as the Label. You’ve left the Quantity blank.

CustomerOrdersCount
Sam SmithApple Pie Muffin20
lana Del RayBread Pudding1
Barry ManilowHoney Chia8
freddy MercuryApple Pie Muffin3

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

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

Updated 2 days ago
Was this helpful?