Contents

  1. Home
  2. Contents
  3. How to Create a Stacked Bar or Column Widget
  4. Customizing the Stacked Bar Widget

Customizing the Stacked Bar Widget

First, I want to narrow the scope of my widget so that it only displays the top six goal-scoring teams. To achieve this, I simply need to filter the data.

 

In the “Assign Data” tab, I will click the “Options” button that appears beside the relevant field. In this case, I want to filter the data that relates to teams, so I will select the “Options” button for the “TeamName” field. After clicking the “Options” button, I will click “Filter(s).” This will allow me to filter the data according to my desired criteria.

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

 

In order to display the top six goal-scoring teams, I simply need to click the “Rank” checkbox, select “Top” from the drop-down list box for the “Mode” option, and change the “Count” option to 6. Finally, I need to change the “Column” drop-down list box to “Goals.”

 

This ensures that my data will be filtered such that the widget will only display the top six goal-scoring teams.

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

 

After I have filtered the data using the “TeamName” field, my widget looks like this.

filter popup where we can add filter for the TeamName field

Remember that the “Goals” measure is currently placed above the “Shots” measure in the “Values” box. However, the widget’s appearance will change depending on where you place the fields in the “Values” box.

 

For example, if I move the fields in the “Values” box so that the “Shots” measure appears above the “Goals” measure, my widget looks like this.

option to move back the Shots field in the Values box to view the modified widget

 

As you can see, changing the order of the fields in the “Values” box changes the way the data is displayed on the widget. In the first screenshot, goals are represented by the color blue, and they appear first in the bar. In the second screenshot, goals are represented by the color red, and they appear second in the bar.

 

I would like goals to display first in my widget’s bars, so I am going to move the “Goals” value so that it sits above the “Shots” value as it originally did. However, this is just another example of how customizable Syncfusion’s widgets are.

option to move back the Goals field in the Values box to view the modified widget

 

Finally, I am going to add one more customization to my stacked bar widget: a multi-level drill down option. As the name implies, this option will allow me to drill down my data even further by displaying another level of information.

 

In this case, I would like to modify my widget so that if I click on a team’s bar (which shows the team’s total number of goals and shots), I can see a breakdown of which players on the team took shots and scored goals.

 

Making this customization will require me to change the data that is associated with my bars, so I need to navigate to the “Columns” box under the “Assign Data” tab. Currently, the only field in the “Columns” box is the “TeamName” field. If I would like my widget to display individual players’ statistics, I need to add the “PlayerName” field.

 

When I drag the “PlayerName” field to the “Columns” box, 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 looks like this.

columns view where we allow to apply Multi-levelDrillDown

 

My widget has not changed its appearance; it still looks the same as it did before. However, because I have enabled multi-level drill down and have added the “PlayerName” field beneath the “TeamName” field, the functionality of my widget has changed. I can test the widget by clicking the “Preview” button in the upper right corner of my dashboard and navigating to the stacked bar widget.

preview button in the upper right corner of the dashboard helps to view the dashboard launched in the web browser page

 

Previously, the bars on my widget were not clickable. If I hovered over a bar, I could see the team’s number of goals or shots, but nothing happened if I clicked the bar itself.

dashboard preview where we can hover the results to see the team’s number of goals or shots

 

Now that I have enabled multi-level drill down, I can click each bar of the widget to display additional information. In this case, I added the “PlayerName” field, so I will be able to see additional information about individual players.

upon clicking each bar of the widget helps to display additional information

 

As you can see, when I hover over a bar on the widget, I am still able to see the team’s number of goals or shots. Now, though, diagonal lines appear, indicating that I can click the bar to view additional information.

dashboard view where we can hover the bar to see the team’s number of goals or shots

 

For example, if I click Belgium’s bar, I am able to see statistics for all six of the Belgian players who have taken shots and scored goals.

statistics shows the Belgium’s bar for all six of the Belgian players

 

My drilled-down widget display has the same functionality as the main widget. If I hover over a bar, I am able to see the player’s full name, along with the total number of shots they took or goals they scored.

dashboard drilled-down widget displays the player’s full name while hovering it.

 

As you can see, the multi-level drill down feature is extremely useful if you need to see multiple pieces of big-picture data (such as the sales numbers from several divisions) but also need access to more detailed information (such as the numbers for individual sales reps or a breakdown of the different products that each division has sold).

dashboard provides more detailed information like the numbers for individual sales reps in the widget when we click the bar

 

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.

 

How can we help?