# Circularchart

<figure><img src="/files/PAYZPqk5U5wX7SNC6vZV" 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 %}           |                         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/viz-gallery/new-viz-designs/circularchart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.