Donut chart widgets

[ 1 What data do I need for this widget? ] [ 2 Widget settings ] [ 3 Tips for using a donut chart widget ] [ 4 Query example ]

The Donut chart is a variant of the pie chart and is also intended to plot numerical proportions. The donut has a cut-out center and is divided into slices representing the proportion of each value in a data series. Each slice shows its corresponding data-series value next to it.

Much like pie charts, donut charts are useful when you need to do a part-to-whole data analysis and have only a small number of categories to compare.

What data do I need for this widget?

For a more accurate analysis, the source query must contain grouped events and aggregated values. If there are several grouping arguments and aggregations, you can select the one to use in the widget's visual settings.

If the source query does not group and aggregate, it must contain at least two fields, one of them with numeric values. If there is more than one, you can select the necessary one in the widget's visual settings.

Widget settings

To edit the widget settings, you must first be in Edit mode.

Click the widget title bar to open its settings. Alternatively, the settings are accessible via the Ellipsis icon → Properties. The widget settings are contained in three tabs, Data, Visual, and Raw.

The settings in the Data and Raw tabs are described in the Create a widget article. These are the Visual settings for the donut chart:

Category	Setting	Description

Category	Setting	Description
Fields	Aggregation	Value that determines the proportion of each slice of the donut. It must be a number.
Fields	Series	Select the data series that you want to display in the pie chart.
General	Limit slices	Limits the number of slices to show, grouping the rest of the categories in a single group.
General	Sort legend	This is the maximum number of slices to plot on the chart. This is done to avoid overcrowding and to maintain readability. Total values: choose between total values or series name for the limit slices. Ascending/Descending: select whether to sort from ascending or descending order.
Legend	Horizonal alignment	Select the horizontal alignment of the legend that indicates the different series. Choose center, right or left.
	Vertical alignment	Select the vertical alignment of the legend. Choose bottom, top or middle.
	Layout	Select the layout alignment of the legend. Choose horizontal or vertical.
	Size	The range of values (from 16px to 320px).

Tips for using a donut chart widget

Here are a few tips to get the most out of your donut chart.

Move your mouse over any slice of the donut to display a tooltip that contains detailed information.
Hover over a data series in the chart legend to dim the rest of them down in the chart or click it to hide it or show it.
To emphasize an individual slice, you can pull it away from the chart by clicking it (hold Ctrl in Windows or command in Mac to pull several slices). Click the slice again to move it back to its original location.

Query example

This is the source query used and the fields mapped to generate the widget shown above:

query(
from demo.ecommerce.data
group every 5m by str(statusCode), method, protocol
select count() as count
)

Aggregation	count
Series	method