# Circularchart

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-6c165f9961e52e6562239b419e00b115a2e41033%2Fillustration_circularchart_NEW.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## 🧭 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

{% tabs %}
{% tab title="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.

{% @arcade/embed url="<https://app.arcade.software/share/R92ZNc3xcJ26B7l0EOKZ>" flowId="R92ZNc3xcJ26B7l0EOKZ" %}

**Chart Configuration Step-by-Step**

<table><thead><tr><th width="249.33333333333331"></th><th>Option</th><th>How does it work?</th></tr></thead><tbody><tr><td><strong>Category</strong></td><td></td><td></td></tr><tr><td></td><td>Circle category</td><td>The circle category corresponds to a column in your dataset, such as 'Product Type'.</td></tr><tr><td></td><td>Enable drill-down</td><td>Allows users to interactively click on a chart segment to reveal deeper data layers or subcategories.</td></tr><tr><td><strong>Proportion</strong></td><td></td><td></td></tr><tr><td></td><td>Segment size</td><td>Select the aggregation to use, and the column on which the aggregation will be applied</td></tr><tr><td></td><td>Precision</td><td><p>Precision determines the level of detail in how your values are displayed. By default, measures use a <code>.2f</code> format, meaning they are shown with two decimal places.</p><p><strong>Example:</strong><br>A value of <code>3.14159</code> will be displayed as <code>3.14</code> when using <code>.2f</code> formatting.</p></td></tr><tr><td></td><td>Unit</td><td>Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.</td></tr><tr><td></td><td>Sentiment</td><td><p>Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.</p><p><em>Note: Sentiments can be customized in the app theme.</em></p></td></tr><tr><td><strong>Additional parameters</strong></td><td></td><td></td></tr><tr><td></td><td>ID</td><td>Unique chart Id</td></tr><tr><td></td><td>Add complementary value</td><td>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.</td></tr><tr><td></td><td>Add user chart guide</td><td>Lead your chart viewers through the narrative of your data.</td></tr><tr><td><strong>Chart performance</strong></td><td></td><td>Technical performance</td></tr></tbody></table>

**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. |
| {% endtab %} |                       |                                                                                       |

{% tab title="Legacy Circular Chart" %}
This page provides a step-by-step guide for creating a circularchart using the legacy design.

<mark style="color:red;">\*</mark>**Mandatory parameters**

<table><thead><tr><th width="249.33333333333331">Section</th><th>Option</th><th>Configuration tutorial</th></tr></thead><tbody><tr><td></td><td>Dataset<mark style="color:red;"><strong>*</strong></mark></td><td>Select the dataset used by the chart</td></tr><tr><td></td><td>Label<mark style="color:red;"><strong>*</strong></mark></td><td>Select the name of the column containing the labels</td></tr><tr><td></td><td>Value<mark style="color:red;"><strong>*</strong></mark></td><td>Select the aggregation to use, and the column on which the aggregation will be applied</td></tr><tr><td>Legend</td><td>Display legend</td><td>Click on the toggle</td></tr><tr><td>Legend</td><td>Segment selected by default</td><td><ul><li>Check the box</li><li>Setup the configuration type and enter a value (if needed)</li></ul></td></tr><tr><td>Legend</td><td>Additional info</td><td>Select the column columns that will be displayed in the legend</td></tr><tr><td>Drill</td><td>Drill</td><td><ul><li>Check the box "Drill"</li><li>Select columns in the order that describe your hierarchy (e.g. ‘region’, then ‘country’ and then ‘city’)</li></ul></td></tr><tr><td>Display</td><td>Size</td><td><p>(Used only for multiple charts)</p><p>Enter a proportion of the total screen between 0 and 1</p></td></tr><tr><td>Display</td><td>Max number of arcs per level</td><td>Enter the maximum number of arcs to be displayed (The arcs that exceed this number will be squashed in a single arc named Others)</td></tr><tr><td>Display</td><td>Mobile size</td><td><p>(Used only for multiple charts)</p><p>Enter a proportion of the total screen between 0 and 1 for mobile screens</p></td></tr><tr><td>Display</td><td>Custom css class</td><td>Set a custom CSS class to target this specific chart with CSS</td></tr><tr><td>Tutorial</td><td>ID</td><td>Enter an ID<br>Change the ID to display the tutorial again<br>All tutorials with the same ID will be displayed only once</td></tr><tr><td>Tutorial</td><td>Message</td><td>Enter your message. This will be displayed to your users.</td></tr><tr><td>Tutorial</td><td>Always show this tutorial</td><td>By default the tutorial is shown once only.</td></tr></tbody></table>
{% endtab %}

{% tab title="New vs. Legacy Configuration" %}

| **⭐️ 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 |
| {% endtab %}            |                         |
| {% endtabs %}           |                         |