# Pie Chart

> Part of the NocoDB documentation (Product docs > Dashboard > Widgets). Index of all pages: https://nocodb.com/llms.txt. Any docs page is available as Markdown by adding `.md` to its URL.

URL: https://nocodb.com/docs/product/dashboards/widgets/pie-chart
Last updated: 2026-09-25

Configure pie chart widgets to visualize data distribution in your dashboard

The **Pie Chart** widget in NocoDB dashboards allows you to visualize data distribution across categories. It is particularly useful for showing how different segments contribute to a whole.

<AskNocoAI>
  <Prompt>
    Add a pie chart of [tickets] by [Priority]
  </Prompt>

  <Prompt>
    Add a pie chart of [records] by [Status]
  </Prompt>

  <Prompt>
    Change the [widget name] chart to show only [open] records
  </Prompt>
</AskNocoAI>

## Title & Description

* **Title**: Enter a title for the pie chart widget. This will be displayed prominently at the top of the widget.
* **Description**: Optionally, add a description to provide context or details about the data being visualized. This will appear below the title.

<img alt="Title" src={__img0} placeholder="blur" />

## Data Source

* **Table**: Select the table from which you want to pull data for the pie chart. This is the primary source of records for the visualization.
* **Record**: Select records from the chosen table to be included in the pie chart. You can choose from:
  * **All Records**: Displays all records in the selected table.
  * **Records from a view**: Allows you to filter records based on a specific view, enabling focused visualizations. You need to select a view from the dropdown.
  * **Specific Records**: Apply filters to select specific records for the pie chart. This is useful for showing data based on certain criteria. You can add multiple filters to refine the selection.

<div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
  <img src="/img/v2/dashboards/widget-number-source-1.png" alt="Number Widget Config 1" style={{ width: "30%", minWidth: "240px", borderRadius: "8px", border: "1px solid #ddd" }} />

  <img src="/img/v2/dashboards/widget-number-source-2.png" alt="Number Widget Config 2" style={{ width: "30%", minWidth: "240px", borderRadius: "8px", border: "1px solid #ddd" }} />
</div>

## Display

* **Category Field**: Select the field that will be used to determine the segments of the pie chart. This field should contain categorical data that you want to visualize.
  * **Order**: Choose how the segments are ordered in the pie chart. You can order them by:
    * **Default**: Segments are displayed in the order they appear in the data.
    * **Ascending**: Segments are sorted in ascending order based on their values.
    * **Descending**: Segments are sorted in descending order based on their values.

  * **Include empty records**: Optionally, you can choose to include records that do not have a value for the selected category field. This can help in visualizing segments that may otherwise be omitted due to missing data.

* **Value Field**: Choose the field that will determine the size of each segment in the pie chart. This field should contain numerical data that represents the value for each category.
  * **Record Count**: Displays the count of records for each category.
  * **Field Summary**: Shows the sum, average, minimum, maximum, or count of a specific field across the selected records. Available options vary based on the field type.

<img alt="Field Summary" src={__img1} placeholder="blur" />

## Appearance

You can customize the appearance of the pie chart to enhance its visual appeal and clarity. The following options are available:

* **Size**: Adjust the size of the pie chart to fit your dashboard layout. You can choose from small or medium sizes.

* **Legend Orientation**: Choose the orientation of the legend that displays the category names and their corresponding colors. Options include:
  * **Right**: Places the legend to the right of the pie chart.
  * **Bottom**: Places the legend below the pie chart.
  * **Left**: Places the legend to the left of the pie chart.
  * **Top**: Places the legend above the pie chart.

* **Show Percentage in chart**: Enable this option to display the percentage contribution of each segment within the pie chart. This provides additional context for understanding the data distribution.

* **Show Count in Legend**: Enable this option to display the count of records for each category in the legend. This helps in understanding the number of records represented by each segment.

<img alt="Appearance" src={__img2} placeholder="blur" />

---

## Related pages

- [Number](https://nocodb.com/docs/product/dashboards/widgets/number.md): Configure number widgets to display key metrics in your dashboard
- [Text](https://nocodb.com/docs/product/dashboards/widgets/text.md): Configure text widgets to add static textual content to your dashboard
- [Bar Chart](https://nocodb.com/docs/product/dashboards/widgets/bar-chart.md): Configure bar chart widgets to compare values across categories in your dashboard
- [Line Chart](https://nocodb.com/docs/product/dashboards/widgets/line-chart.md): Configure line chart widgets to visualize trends and comparisons over time or categories in your dashboard
- [Donut Chart](https://nocodb.com/docs/product/dashboards/widgets/donut-chart.md): Configure donut chart widgets to visualize data distribution in your dashboard
- [iFrame](https://nocodb.com/docs/product/dashboards/widgets/iframe.md): Embed external content securely inside your dashboard using the iFrame widget