Circularchart
🧭 Overview
The Circular Chart is a visual tool used to represent data as segments of a circle, providing a quick overview of proportional relationships within a dataset. It is particularly effective when you need to:
Illustrate part-to-whole relationships.
Compare relative sizes of categories at a glance.
Highlight a dominant category or distribution patterns.
📊 Example Use Case
Market share analysis.
Customer segmentation by demographics.
Budget allocation or expenditure breakdown.
Survey result representation (e.g., satisfaction levels, preferences)
⭐ Key Features
Circle Category: Define and display the primary dimension for data segmentation.
Enable Drill-down: Interactively explore sub-levels of data directly from the chart.
Change Date Format: Customize how dates appear in the chart labels or tooltips.
Segment Size: Control the arc size based on numerical values assigned to each category.
Add Complementary Value: Include a secondary value for context, e.g., comparison or delta.
Add User Chart Guide: Provide inline guidance to help users understand the chart.
Configuration
Learn how to create a circularchart using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.
Chart Configuration Step-by-Step
Category
Circle category
The circle category corresponds to a column in your dataset, such as 'Product Type'.
Enable drill-down
Allows users to interactively click on a chart segment to reveal deeper data layers or subcategories.
Proportion
Segment size
Select the aggregation to use, and the column on which the aggregation will be applied
Precision
Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.
Example:
A value of 3.14159 will be displayed as 3.14 when using .2f formatting.
Unit
Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.
Sentiment
Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.
Note: Sentiments can be customized in the app theme.
Additional parameters
ID
Unique chart Id
Add complementary value
The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.
Add user chart guide
Lead your chart viewers through the narrative of your data.
Chart performance
Technical performance
Style Configuration
Arcs
Arcs
Customize arc color to align with your branding preferences.
Distinguish by colors
Automatically assigns different colors to each chart arc for easy visual distinction.
This page provides a step-by-step guide for creating a circularchart using the legacy design.
*Mandatory parameters
Dataset*
Select the dataset used by the chart
Label*
Select the name of the column containing the labels
Value*
Select the aggregation to use, and the column on which the aggregation will be applied
Legend
Display legend
Click on the toggle
Legend
Segment selected by default
Check the box
Setup the configuration type and enter a value (if needed)
Legend
Additional info
Select the column columns that will be displayed in the legend
Drill
Drill
Check the box "Drill"
Select columns in the order that describe your hierarchy (e.g. ‘region’, then ‘country’ and then ‘city’)
Display
Size
(Used only for multiple charts)
Enter a proportion of the total screen between 0 and 1
Display
Max number of arcs per level
Enter the maximum number of arcs to be displayed (The arcs that exceed this number will be squashed in a single arc named Others)
Display
Mobile size
(Used only for multiple charts)
Enter a proportion of the total screen between 0 and 1 for mobile screens
Display
Custom css class
Set a custom CSS class to target this specific chart with CSS
Tutorial
ID
Enter an ID Change the ID to display the tutorial again All tutorials with the same ID will be displayed only once
Tutorial
Message
Enter your message. This will be displayed to your users.
Tutorial
Always show this tutorial
By default the tutorial is shown once only.
⭐️ New
Legacy
Circule category
Label
Enable drill-down
Drill
Change date format
Custom date tick format
Segment size
Value
Add complementary value
Additional info
Add user chart guide
Tutorial
Distinct arcs by colors
Distinct arcs by colors
Last updated
Was this helpful?