Contents

  1. Home
  2. Contents
  3. How to Create a Doughnut or Pie Chart Widget
  4. Customizing the Doughnut Widget

Customizing the Doughnut Widget

I know that this widget offers the multi-level drill down option, so now that I have organized the data by team, I would like to add a drill-down option that will allow me to see specific players’ data.

 

However, before I add the drill-down option, I would like to filter the existing data to make my widget easier to read.

 

To do this, I simply need to click the “Options” button for the “TeamName” field and click “Filter(s).”

choose Options button where we can to apply filter to the data

 

Then, I need to click the “Rank” checkbox, select “Top” from the drop-down list box for the “Mode” option, and change the “Count” option to the desired number. Finally, I need to change the “Column” drop-down list box to “Assists.”

filter popup allows to configure the data to be filtered for the required widget

Now, my widget only shows the six teams with the most assists in the World Cup.

dashboard view explores the filtered doughnut results

Next, I am going to add the multi-level drill down option to my widget. As its name suggests, this function allows me to add another layer of data to my widget.

 

In this case, I would like to modify my widget so that if I click on a team’s doughnut segment, I can see a breakdown of which players on the team had assists.

 

Making this customization will require me to change the data that is associated with my doughnut segments, so I need to navigate back to the “Columns” box under the “Assign Data” tab. If I want my widget to display information for players as well as teams, I need to drag the “PlayerName” field to the “Columns” box.

 

When I try to do so, a pop-up appears asking if I want to enable multi-level drill down.

popup allows to enable the multi-level drill down

After I click “Yes,” my “Columns” box displays the “PlayerName” field beneath the “TeamName” field, and multi-level drill down has been enabled. We will explore this feature’s functionality soon, but before doing so, I want to ensure that my widget looks the way I want it to look.

 

Right now, my doughnut’s segments are each associated with a percentage value. Though percentage values can be useful in many situations, they do not really suit my purposes, so I would like to replace them. I would also like to display a key or guide of some sort so that I know which team each color represents without hovering over each segment.

 

To achieve this, I can click the “Properties” tab. If I scroll down to the “Basic Settings” section, I can click the “Show Legend” option. My doughnut widget immediately displays a guide demonstrating which segment colors are associated with which teams.

columns view where we allow to apply Multi-levelDrillDown

I would still like to remove the percentage values from the widget, and in the “Basic Settings” section, I see a drop-down list box called “Data Label.” Currently, the “Percentage” option is selected.

Data Label drop down list allows to view the data in different format

If I select the “Value” option instead, my widget will replace the percentage value with the number of assists that each team has. It is worth noting that you can display both the numeric value and percentage value if you wish, but for this widget, I would only like to display the numeric value.

 

Now, my widget looks like this.

dashboard view with doughnut widget demonstrates the segment colors are associated with teams

Now that my widget looks the way I want it to look, I would like to explore the multi-level drill down feature to ensure that it functions properly.

widget shows the Value option chosen from the Data Label

I can test the widget’s functionality by clicking the “Preview” button in the upper right corner of my dashboard and navigating to the doughnut widget. If I hover over a doughnut segment, I see the name of the team and the team’s total number of assists. The diagonal lines indicate that I can click the segment to view additional information.

If I click on Belgium’s segment, I can see individual Belgian players’ total numbers of assists. The drilled-down widget display also contains a legend demonstrating which segment color is associated with which player.

dashboard view explores the Belgium’s segment to see individual Belgian players’ total numbers of assists

 

Multi-level drill down is available with 15 different Syncfusion widgets. All of the widgets in the Comparison, Proportion, and Distribution sections of the widget menu offer this feature, allowing you endless customization options.

widget supports the Multi-level drill down with 15 different Syncfusion widgets

Finally, it is worth noting that if you would like to create a pie chart widget, you can do so using exactly the same steps that are outlined above. The only difference between the doughnut widget and the pie chart widget is that the pie widget does not have a white circle in its center, so its segments have a slightly different appearance (as you can see in the screenshot to the right). However, the widgets’ functionalities are the same.

pie chart widget can be created in the same way as described above

How can we help?