WS Doughnut Chart

The WS Doughnut Chart Widget is used to display parts of a whole using segments of a ring. It is particularly effective for visualizing category-wise contributions to a total, such as product sales, customer segments, or usage distribution.

Step-by-Step Guide to Use the WS Doughnut Chart Widget

Step 1: Add the Widget

Open the Widget Panel, go to the Charts & Tables section, and pick the WS Doughnut Chart Widget onto your page.


Step 2: Connect to Data Model

With the widget selected, go to the Property Editor and choose the Data Model that holds the category and value fields you want to visualize (e.g., orders, products, user types).


Step 3: Set Row (Pivot)

In the Row (pivot) field, select the categorical field that will define each segment of the doughnut — for example, Product Category, User Role, or Region.

Each unique value in this field becomes a distinct segment in the chart.


Step 4: Add and Configure Datasets

In the Datasets section, define the values that determine the size of each segment in the doughnut:

  • You can select either a categorical or numerical Columns as the data source.

  • After selecting the field, configure the Summarize By property (e.g., Sum, Count, Average) to transform it into a quantifiable value.

  • You can also use the Count of Value option to count how many times a certain value appears in the dataset.

This makes the dataset flexible — even non-numerical fields can be aggregated meaningfully. Each segment’s angle and size is dynamically calculated based on the resulting summary value relative to the total.

The angle and size of each segment is dynamically calculated based on the value it represents relative to the total.

You can further customize the display, layout, and behavior of the chart using additional chart properties. For a full list of customization options, refer to the Common Properties.


Step 5: Preview and Interact

After setting up the chart:

  • The changes are instantly reflected on the page in the on-page editor.

  • Use Run Mode to interact with the chart:

    • Hover over segments to view tooltips.

    • Optionally trigger interactions on click (e.g., navigate to details, filter another chart).

Last updated