# Pie Chart

*Skill Level: Beginner*

## Before You Begin

* Know the basics of [Databases](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/broken-reference) and [Relationships](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/broken-reference) in Adalo
* For most applications of the pie chart, you will need two collections:
  * A collection of record categories (for example restaurant categories, trip categories, book categories, etc.) or similar that can be tied to the pie chart
  * A collection of records with a relationship ([many-to-many](https://help.adalo.com/glossary#many-to-many) works best) to those categories (for example restaurants, trips, books, etc.)
* You do not need a paid Adalo plan to implement this feature

## Walkthrough

{% tabs %}
{% tab title="Simple" %}
**1.)** While in your Adalo app, click the big plus sign <img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfE_AQhM8BcVaFsjCay%2F-MfEekjmLFwlx6oPUUw0%2Fadd%20button.png?alt=media&#x26;token=756245fd-14cc-4e4d-bf6e-22e4703663ba" alt="" data-size="line"> in the top left corner

**2.)**  Scroll down to the **Marketplace** section and click **Explore Marketplace**

**3.)**  Find **Chart Kit** in the list and click **Install**

**4.)**  Back in the components list, enter **Pie Chart** in the search bar, then click and drag the component onto the desired screen

**5.)**  In the **Pie Chart** section dropdown, under the **What is this a chart of** dropdown, select the collection you wish to display with the chart (in this case, it is the Categories collection)

**6.)**  If a filter is needed, add it just below in the **Filter** dropdown. For instance, instead of showing all Trip Categories, you can add a filter to show only the Logged in User's > Restaurants > Restaurant Categories to show only the categories of restaurants the user has been to.

**7.)**  In the **Show value as** dropdown, you can choose to display the values in the chart key as counts, percentages, or hide them completely.

**8.)**  In the **Slice Value** field, you can use [Magic Text](https://help.adalo.com/glossary#magic-text) to display a Count of the records that have a relationship to the categories collection. For instance, you may choose **Restaurants > Count** or **Trips > Count**.  Note that you can also type in a value here, but the value will be true for all slices.

**9.)**  In the **Slice Label** field just below that, you can label all slices by typing it in directly, or you can use Magic Text to display the Category names for each slice (recommended).

**10.)**  The **Slices** section dropdown allows you to change various options about the pie chart that are mostly based on personal preference:

* **Maximum Number of Slices** - use the slider to choose how many sections to display in the pie chart
* **Other Slice Label** - change what the "Other" slice is called by typing in the field or using Magic Text
* **Slice Colors** - use the dropdown to change whether pie chart colors are complementary to a chosen color or assign custom colors to each slice of the pie
* **Slice Actions** - here you can add click actions for the slices of the pie much like you would in a list. By clicking on a pie slice, you can send that slice's related record data to another screen or use it to create, update, or delete records. Note that Click Actions are not available for the "Other" slice.

{% hint style="info" %}
Note that you will need data in your collections for the component to pull from in order for the pie chart to appear.
{% endhint %}
{% endtab %}

{% tab title="In-Depth" %}
**1.)** While in your Adalo app, click the big plus sign <img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfE_AQhM8BcVaFsjCay%2F-MfEekjmLFwlx6oPUUw0%2Fadd%20button.png?alt=media&#x26;token=756245fd-14cc-4e4d-bf6e-22e4703663ba" alt="" data-size="line"> in the top left corner

**2.)**  Search for **"Marketplace"** and click **Explore Marketplace**&#x20;

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfEewhQadzxoHMeu6DK%2F-MfEjpnno258Lkud-SVa%2Fopen%20marketplace.gif?alt=media\&token=ced296b3-e977-42a1-8f56-67ffb3217d63)

**3.)**  Find **Chart Kit** in the list and click **Install**

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfctqVa642aJTkddfpS%2Fdownload%20chart%20kit.gif?alt=media\&token=d999f9d4-e884-4fa3-90c7-096457ca9076)

**4.)**  Back in the components list, enter **Pie Chart** in the search bar, then click and drag the component onto the desired screen

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfcuywqvTOfRFbGbOve%2Fdrag%20and%20drop%20chart%20component.gif?alt=media\&token=bebf534e-a812-4b1b-b654-7413fd7f2a81)

**5.)**  In the **Pie Chart** section dropdown, under the **What is this a chart of** dropdown, select the collection you wish to display with the chart (in this case, it is the Categories collection)

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-Mfcw5nkA68q0ey5brgb%2Fselecting%20collection.gif?alt=media\&token=71627348-e311-4933-a13a-93d98218e981)

**6.)**  If a filter is needed, add it just below in the **Filter** dropdown. For instance, instead of showing all Trip Categories, you can add a filter to show only the Logged in User's > Restaurants > Restaurant Categories to show only the categories of restaurants the user has been to. Note that you'll need relationships to the Users collection to show this. You can also add Custom Filters here as well.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfcwvfK_S7j4yR18jPl%2Fpie%20chart%20filter.gif?alt=media\&token=5e8626ca-b09c-48fa-9d6b-7f7590621014)

**7.)**  In the **Show value as** dropdown, you can choose to display the values in the chart key as counts, percentages, or hide them completely.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfcyEkuqgcEFmrAopj9%2Fchange%20slice%20value%20display.gif?alt=media\&token=6ed65c6f-286b-432e-9ca7-b62d22181fd0)

**8.)**  In the **Slice Value** field, you can use [Magic Text](https://help.adalo.com/glossary#magic-text) to display a Count of the records that have a relationship to the categories collection. For instance, you may choose **Restaurants > Count** or **Trips > Count**.  Note that you can also type in a value here, but the value will be true for all slices.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfcycqhQE2NM98ExRbS%2Fslice%20value.gif?alt=media\&token=235d19d6-7d58-42f4-8890-b61596dc86fd)

**9.)**  In the **Slice Label** field just below that, you can label all slices by typing it in directly, or you can use Magic Text to display the Category names for each slice (recommended).

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfczJaTRMTJsFoqIckW%2Fslice%20label.gif?alt=media\&token=ee2c7793-980f-4532-b957-394ad0759351)

**10.)**  The **Slices** section dropdown allows you to change various options about the pie chart that are mostly based on personal preference:

* **Maximum Number of Slices** - use the slider to choose how many sections to display in the pie chart
* **Other Slice Label** - change what the "Other" slice is called by typing in the field or using Magic Text
* **Slice Colors** - use the dropdown to change whether pie chart colors are complementary to a chosen color or assign custom colors to each slice of the pie
* **Slice Actions** - here you can add click actions for the slices of the pie much like you would in a list. By clicking on a pie slice, you can send that slice's related record data to another screen or use it to create, update, or delete records. Note that Click Actions are not available for the "Other" slice.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfcgxShuLtIzJPfXS8A%2F-MfczwO0DJXiQA8bPgyv%2Fextra%20options.gif?alt=media\&token=60b71538-6ae3-48a8-97c9-2a5a6986f2b5)
{% endtab %}

{% tab title="Video" %}
{% embed url="<https://youtu.be/Iv8UCYnCEZs>" %}
{% endtab %}
{% endtabs %}

## Results

Now your users will be able to see a visual representation of the records in your database through a pie chart. For a clone-able kit of the app in this walkthrough, [click here](https://previewer.adalo.com/af14d84c-acaa-4db4-91f6-4399c90a5060).&#x20;

## Learn More

* There are many different ways to implement the pie chart component. When counting records for displaying slice values, you can also add filters to this which allows you to narrowly define what is shown in the pie chart.
* You can change the size of the chart by clicking and dragging the handles on the chart's yellow bounding box
* If you need more functionality, you can check out the custom components

## Help

If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!
