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

New Circular Chart

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

	Option	How does it work?
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

	Option	How does it work?
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.

Legacy Circular Chart

This page provides a step-by-step guide for creating a circularchart using the legacy design.

*Mandatory parameters

Section	Option	Configuration tutorial
	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.