Learn about building and configuring pie and donut charts in Mappica.
Pie and Donut Charts display data as proportional segments of a circle, making them ideal for showing the composition of a whole and the relative sizes of different categories. Pie charts fill the entire circle, while donut charts have a hollow center that can display additional information or simply provide a more modern aesthetic.
These charts are particularly effective for displaying categorical data where you want to emphasize the proportion each category contributes to the total. They work best with a limited number of categories (typically 5-7) to maintain readability and visual clarity.
In the Setup section, under the Chart tab, you can assign the following properties:
Since pie and donut charts are circular, they automatically adjust to fit within the available space. The margins provide breathing room around the chart and any legends or labels.
In the Dataset section, you can select the dataset for your chart. If you need to add a dataset, this can be done by selecting New Dataset in the Project tab.
If you are on the Pro plan, you can upload your own files (in csv format) to use as datasets, by clicking New Dataset and then Upload Dataset.
After you have selected a dataset, you can optionally enable the Prefilter Dataset switch, which lets you filter the data that is supplied to the chart. The filter is a "prefilter" because it is applied before the visualization is generated; end users are unable to adjust the filter dynamically.
Next, the Data Format is displayed, which is set to Long Data. Pie and donut charts use long data format where each row represents a category with its corresponding value.
Finally, choose the Fields that should be used to construct the chart:
You can establish connections to filter elements under the Chart tab, in the Connections section, by making a selection under Filter.
A Filter element can be styled as a series of checkboxes, a dropdown menu, or a slider. Values from the specified Filter Field appear as individual checkboxes, dropdown menu items, or (for numeric filtering) slider values. A given chart can be connected to one or more filters, and the same filter can be connected to multiple charts or other elements.
When a filter element is connected to a chart, it dynamically controls the dataset records displayed in the chart based on the user's selections. This allows users to focus on specific categories or filter out certain segments from the pie/donut chart.
Additionally, filter elements can inherit color formatting from a chart, provided that the chart's Color Field is the same as the filter's Filter Field. For more information, see the Color Formatting section of the documentation for filter elements.
Typically, the Filter element you connect to will use the same Dataset as the chart element. However, this is not strictly necessary. If the filter and chart elements use different datasets, the filter will only affect the chart if the chart's dataset contains a field (column) with the same name as the Filter Field in the filter element. In this case, the values in these fields must at least partially align for the filter to take effect. Any non-matching values between the fields will be ignored during filtering.
You can choose how to sort the chart segments under the Chart tab in the Sort section. Options include:
Color formatting is defined in the Colors section under the Chart tab.
You can specify a Color Field, which is typically the same as your Category Field. Each unique category will be treated as a separate series and can be assigned a distinct color. You can also use a numeric field to create a color gradient across segments.
For categorical data, you can assign specific colors to each category. For numeric color fields, you can configure a Color Gradient, Domain Minimum and Maximum, and Color Scale. These features are explored in greater detail in our Colors page.
In the Settings section under the Chart tab, specify the following options:
Chart Type: Choose between:
Inner Radius (for donut charts): Control the size of the hollow center as a percentage of the total radius. Higher values create a thinner ring, while lower values create a thicker ring.
Start Angle: Set the starting angle for the first segment. 0° starts at the top (12 o'clock position), 90° starts at the right (3 o'clock), and so on.
Segment Spacing: Add spacing between segments to create visual separation. This is measured in pixels.
Show Percentages: Display percentage values instead of raw values in labels and tooltips.
Minimum Segment Size: Set a minimum percentage threshold for displaying segments. Segments smaller than this threshold will be grouped into an "Other" category.
In the Labels section under the Chart tab, you can configure how segment labels are displayed:
Display Labels: Enable or disable labels for chart segments.
Label Content: Choose what information to display in labels:
Label Position: Control where labels appear:
Label Formatting: Customize the appearance of labels including font size, color, and formatting options.
In the Annotations section under the Chart tab, you can add text annotations that appear in the center of donut charts or around pie charts. This is useful for displaying totals, titles, or other contextual information.
Tooltips can be enabled by selecting the Chart tab, navigating to the Tooltip section, and selecting Display Tooltip. These are automatically configured to display the category name, value, and percentage for each segment. You can customize the tooltip format and choose whether to display raw values or percentages.