# Chord Diagram

{% hint style="success" %}
**Who can use this feature?**

All Squirrel365 plans include the Chord Diagram component. 

For more details, see our [**pricing comparison matrix**](https://squirrel365.io/pricing/).
{% endhint %}

he **Chord Diagram** is a data visualization component that displays weighted relationships between several entities and data points.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F233K8EUCP4abBq8YMZx4%2FComponent.png?alt=media&#x26;token=673854bb-624f-4f67-bbd1-51ce07fc7b7f" alt="" width="428"><figcaption></figcaption></figure>

## Chord Diagram Properties

The **Chord Diagram** component properties consist of **LAYOUT & POSITIONING, DATA**, and **DYNAMIC VISIBILITY** drawers.

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components-functions-and-connections/overview/layout-and-positioning) and [**Dynamic Visiblity**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/) article for more information on using the different methods.

***

### DATA

* **From** - an input field that needs to be bound to the spreadsheet. Contains the start points for the ribbons.
* **To** - an input field that needs to be bound to the spreadsheet. Contains the endpoints for the ribbons.
* **Value** - an input field that needs to be bound to the spreadsheet. Contains the values tied to the ribbons.

{% hint style="info" %}
Both ranges must match in size. In the screenshot below, the ribbons connect as the following:

* A to D = 10
* B to D = 8
* B - E = 4
* and so on...
  {% endhint %}

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FU1xGRZtFWHBEwU8SODhB%2FData_Spreadsheet.png?alt=media&#x26;token=05de4544-7201-4073-bc7e-c497acf60490" alt=""><figcaption></figcaption></figure>

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FB9Lqyw7fP129uOGrSnZq%2FData.png?alt=media&#x26;token=fed06eac-f972-4e58-8712-7521a04a5eab" alt=""><figcaption></figcaption></figure>

#### STYLING

* **Allow Hover to change ribbon opacity** - an option to allow an opacity property to be applied to the Chord ribbons when hovered over.
  * **Hover Opacity** - an input that determines the Hover Opacity.
* **Ribbon Opacity** - an input that determines the default Ribbon Opacity.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F5gj6TKObFaE4CqCV3QTJ%2FData_Styling.png?alt=media&#x26;token=b37cfef3-d0b4-4d93-a40a-a280fa1e32ea" alt=""><figcaption></figcaption></figure>