# Advanced - Chart

The **Advanced Chart** is the premier data visualization tool in the UniDeck Advanced Widget suite. It allows you to create rich, dynamic charts by pulling data from custom data sources. Connect to any internal or external HTTP/S API through the API Hub and transform complex data arrays into insightful Bar, Line, Pie charts, and more, directly on your dashboard.

This widget is ideal for visualizing time-series data, comparing metrics, or tracking progress from virtually any data source you have access to.

### Getting Started

First, add the Advanced Chart widget to your dashboard from the **Widget Gallery**. Upon adding it, the widget will display a "No configuration found" message. This is because, like all Advanced Widgets, it must be linked to a data source and configured.

To begin, right-click on the widget and select **"Configure"** to open the main Chart Configuration panel.

### Configuration

The configuration panel is where you define your chart's data and appearance. It features a live preview that updates as you make changes and is organized into two main tabs: **Data Settings** and **Chart Settings**.

<figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FiuE2vwVJD3j28nbnG8jm%2Fimage.png?alt=media&#x26;token=76ffa1c2-bf04-480a-9ade-0e06c595a9df" alt=""><figcaption><p>Advanced Chart Widget Configuration Modal</p></figcaption></figure>

#### Data Settings Tab

This tab is for connecting your API data to the chart's labels and datasets.

**Response Shape**

* **Response Shape**: Defines the expected structure of your API's JSON response. For most standard data arrays, "General" is sufficient.

<figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FJOyw0OYBtUdKtUobtCIU%2Fimage.png?alt=media&#x26;token=6dc4fe18-73e4-4a80-996b-9a6bf473764d" alt=""><figcaption><p>Response Shape Options</p></figcaption></figure>

**Labels Configuration**

This section configures the labels for the chart's primary axis (typically the x-axis).

* **Labels Array Field**: Select the JSON array from your response that contains the values or objects for your labels.
* **Label Field Key**: Specify the key within the array's objects to use for the label text. For example, if your data contains timestamps, you might select a `start_time` or `date` field.
* **Label Transformation**: Apply a transformation to the raw label values. This is especially useful for formatting. For example, select **ISO Date** to correctly parse and display date strings.

<figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FBwK6JQJWNVz3Lw7qOU3d%2Fimage.png?alt=media&#x26;token=0224c526-1c37-451b-8f08-443675450f8f" alt=""><figcaption><p>Labels Configuration Options</p></figcaption></figure>

**Datasets Configuration**

Here, you define the data series to be plotted on the chart. You can add multiple datasets to compare different data on the same chart.

For each dataset, you can configure:

* **Label**: The name of the dataset as it will appear in the chart's legend (e.g., "Daily Sales").
* **Data Array Field**: The JSON array containing the data for this series.
* **Data Field Key**: The specific key within the data array that holds the value to be plotted.
* **Data Grouping**: This powerful feature aggregates your data. Instead of plotting raw values, you can perform a calculation. For example, select **Count** to plot the total number of items in the data array, which is perfect for creating a bar chart of daily activities. Other potential options include Sum, Average, etc.
* **Styling (Background, Border, Text Color)**: Assign unique colors to each dataset for clear visual separation in the final chart.

<figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FxGqnVgppVDkDpio5Ehli%2Fimage.png?alt=media&#x26;token=55fc4730-dc87-4e97-92b0-f92122b9405d" alt=""><figcaption><p>Datasets Configuration Options</p></figcaption></figure>

#### Chart Settings Tab

While the Data Settings tab handles the "what," the Chart Settings tab handles the "how." This section controls the overall appearance and type of chart.

* **Chart Type**: Select the type of visualization you want to create (e.g., Bar, Line, Doughnut, Pie).
* **Chart Title**: Add an overall title to your chart.
* **Legend**: Control the visibility and position of the chart's legend.
* **Grid Lines & Axes**: Toggle the visibility of the chart's grid lines and set titles for the X and Y axes to provide clear context for your data.

<div><figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FRdyyIv3UrDFqL8tljIxP%2Fimage.png?alt=media&#x26;token=538358cf-381b-4225-9a2b-81726a074791" alt=""><figcaption><p>Chart Basic Settings</p></figcaption></figure> <figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FyfayxJrYHqRChNXKaUTB%2Fimage.png?alt=media&#x26;token=b8da1976-4b0b-4335-ab34-2f60c609b57b" alt=""><figcaption><p>Chart Common Options</p></figcaption></figure> <figure><img src="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FcySGSpJNDJb296WY0Kr3%2Fimage.png?alt=media&#x26;token=78c48885-d077-4629-975b-76e40a3d26cc" alt=""><figcaption><p>Chart Type-Specific Options</p></figcaption></figure></div>

### Sizing

The Advanced Chart widget is available in a range of large sizes to ensure your data is clear and readable. To change the size, right-click the widget, select **"Size"**, and choose an option that best fits your dashboard layout.

<table data-card-size="large" data-view="cards" data-full-width="true"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><strong>8x4</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FMquuWyT0jWhj57ZMjhPs%2FAdvancedChart-8x4.png?alt=media&#x26;token=bfd69047-02b4-4fb9-b58a-090a3576cb2d">AdvancedChart-8x4.png</a></td></tr><tr><td align="center"><strong>8x6</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2F0nkODZLICyoEv64gzWl2%2FAdvancedChart-8x6.png?alt=media&#x26;token=98381da6-8527-4dbe-96ff-60a6ea88a154">AdvancedChart-8x6.png</a></td></tr><tr><td align="center"><strong>12x4</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2Fp1XwyZQUlP6arjSTzemS%2FAdvancedChart-12x4.png?alt=media&#x26;token=358aa590-fa67-40c4-ad7a-da5be374754f">AdvancedChart-12x4.png</a></td></tr><tr><td align="center"><strong>12x6</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FjXKY5k2fXbGiNCcfxVjq%2FAdvancedChart-12x6.png?alt=media&#x26;token=53d170a1-5b97-4771-9acd-d2d75b939958">AdvancedChart-12x6.png</a></td></tr><tr><td align="center"><strong>12x8</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2Fmq0HObNQNzDp7kja0wJq%2FAdvancedChart-12x8.png?alt=media&#x26;token=73db8688-0dec-47a6-b664-b73968bf8376">AdvancedChart-12x8.png</a></td></tr><tr><td align="center"><strong>6x4</strong></td><td><a href="https://1752416096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvDnaF4hHGPbfC3jD5zyh%2Fuploads%2FNXX2EHkJjoG0OMTO0MxJ%2FAdvancedChart-6x4.png?alt=media&#x26;token=31b6140d-2ab5-4d24-9537-9ae25826231a">AdvancedChart-6x4.png</a></td></tr></tbody></table>
