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
How to add a Chart component
- In the Layout Editor, select the tab you want to include a chart on.
- Click on the plus symbol in the Components panel.
- Select the desired chart style (Bar Chart, Line Chart, or Radial Chart).
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
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
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
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
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.
| 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, 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.
