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.
Adding and Setting Up a Chart Component
In the Layout Editor, select the tab you want to add the chart to.
Click on the plus (+) symbol in the Components panel.
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 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.
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.
