We use cookies to improve our service. Learn more.

Reference / Components

Charts

Visualize data in colorful charts.

Meet the new Glide Apps

Glide Pages are now Glide Apps. Please refer to this article for up-to-date information, as some of this documentation is outdated.

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. You can even present them side by side using a Container Component.

Use case of the Chart component

Use case of the Chart component

How to add a Chart component

  1. In the Layout Editor, select the tab you want to include a chart on.
  2. Click on the plus symbol in the Components panel.
  3. Select the desired chart style (Bar Chart, Line Chart, or Radial Chart).

Adding the Chart component

Adding the Chart component

Data

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

Naming the Chart

Naming the Chart

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 Lable (if a radial Chart) X-Axis (if a Linear Chart). This determines what data is grouped by. This will appear at the bottom of the chart and in the floating hints that appear when users hover over the chart.

Assigning the column to X Axis

Assigning the column to X Axis

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

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

Using the Add item to display additional values

Using the Add item to display additional values

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, Show 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.

Limiting the items displayed in the chart using Filter

Limiting the items displayed in the chart using Filter

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

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 3 days ago
Was this helpful?