# Chart

## Overview

Chart is a component to visualize your data. There are several Chart *types* available in UI Bakery:

* Line
* Bar
* Stacked Bar
* Pie
* Doughnut

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FY5Q8UvOi8G4Ip15RY7RU%2FCleanShot%202025-07-21%20at%2014.41.30%402x-min.png?alt=media&#x26;token=be9eedf8-8759-4f6d-83bd-31534ec9f9e7" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="137.20703125">Name</th><th width="197.08984375">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>value</code></td><td><code>[any, number] | []</code></td><td>Current component value</td></tr><tr><td><code>instance</code></td><td><code>ECharts</code></td><td>ECharts instance object (imported from <code>/echarts.d.ts</code>)</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="94.85546875">Name</th><th width="151.51171875">Parameters</th><th width="108.25">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setData</code></td><td><code>data: object[]</code></td><td><code>void</code></td><td>Set component data. Data is an array of objects with arbitrary structure</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="149.8359375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Click</strong></td><td>Triggered when when you click on a data point on a chart</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when the component is double-clicked</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>

## Working with the component

Let's see how you can add a simple chart showing the number of products per vendor:

1. First, create an action to load the list of products from the database (for example, we'll use *MySQL* database and *loadProducts* action).
2. Now, add the Chart component to the canvas and assign the action from step 1 to the *Data* field of the component.
3. Select the *Pie* *Chart* type and proceed to configuring the appearance of the legend in the *Chart legend* section.
4. Finally, adjust the X and Y axis with the necessary values:
   1. Expand the *Series* tab and on the X axis, select the vendor field to be grouped by value.
   2. On the Y axis, set the product name field to be grouped by count.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F4c3mRjaifOHiNotegfq7%2FCleanShot%202025-07-21%20at%2016.38.19%402x-min.png?alt=media&#x26;token=f96c5990-635e-4cae-8ef2-48c550d8266b" alt=""><figcaption></figcaption></figure>

### Custom charts with the ECharts library

You can enhance your chart beyond the default options available in UI Bakery using the built-in [ECharts library](https://echarts.apache.org/examples/en/index.html#chart-type-line) access. Let's see how you can do that:

1. Start by selecting **ECharts** under *Chart Definition*.
2. Next, depending on the chart you select, there're *two options*:
   1. Copy the chart code from the website and paste into the component's *Config* field.\
      \
      \&#xNAN;*<mark style="background-color:blue;">You can access the ECharts instance using the</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">`{{ui.chart.instance}}`</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">variable or directly use the ECharts library through the global</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">`echarts`</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">variable.</mark>*\
      \ <img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FdHSNmeKB24aOzXFSroWZ%2FCleanShot%202025-07-22%20at%2012.39.25%402x-min.png?alt=media&#x26;token=d469f7f2-4524-4597-b631-6956202abec7" alt="" data-size="original">
   2. For charts requiring a *custom SVG map registered*, follow the steps below:
      1. Create an action consisting of **two steps** to download and register the map:
         1. For the *first* step, select the HTTP API action type and paste the map's URL in the following format:\
            `https://echarts.apache.org/examples/data/asset/geo/Map_of_Iceland.svg`\
            \
            Also, turn on the *Transform result* toggle and paste the following code in the **Modify the result** field to extract the requested map content from a base64 value:\
            `atob({{data.base64}});` \
            ![](https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FzSa42eKeWqPszI4PKWSI%2FCleanShot%202025-07-22%20at%2012.46.38%402x-min.png?alt=media\&token=0d6c88ee-cda5-4a1c-8ccb-62bd6e1b218b)
         2. For the *second* step, select the JavaScript Code action type and add the following code to register the map:<br>

            ```javascript
            // register loaded map
            echarts.registerMap('iceland_svg', { svg: {{ data }} });

            // return options
            return {
              tooltip: {},
              geo: {
                tooltip: {
                  show: true,
                },
                map: 'iceland_svg',
                roam: true,
              },
              series: {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                symbolSize: function (params) {
                  return (params[2] / 100) * 15 + 5;
                },
                itemStyle: {
                  color: '#b02a02',
                },
                encode: {
                  tooltip: 2,
                },
                data: [
                  [488.2358421078053, 459.70913833075736, 100],
                  [770.3415644319939, 757.9672194986475, 30],
                  [1180.0329284196291, 743.6141808346214, 80],
                  [894.03790632245, 1188.1985153835008, 61],
                  [1372.98925630313, 477.3839988649537, 70],
                  [1378.62251255796, 935.6708486282843, 81],
                ],
              },
            }
            ```
      2. Now, assign this action to the Chart component's *Config* field.

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

### Custom charts with Custom components 2.0&#x20;

You can also build your own custom charts using our Custom components 2.0 feature. Check out this article for more information:point\_down:

{% content-ref url="../../concepts/custom-components-2.0" %}
[custom-components-2.0](https://docs.uibakery.io/concepts/custom-components-2.0)
{% endcontent-ref %}


---

# 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.uibakery.io/reference/working-with-components/chart.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.