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

Properties

Name	Type	Description
name	string	Component name
value	[any, number] | []	Current component value
instance	ECharts	ECharts instance object (imported from /echarts.d.ts)

Methods

Name	Parameters	Returns	Description
setData	data: object[]	void	Set component data. Data is an array of objects with arbitrary structure

Triggers

Name	Description
On Click	Triggered when when you click on a data point on a chart
On Init	Triggered when the component is initialized

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.

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 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. You can access the ECharts instance using the {{ui.chart.instance}} variable or directly use the ECharts library through the global echarts variable.

   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}});

         2. For the second step, select the JavaScript Code action type and add the following code to register the map:

            // 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.

Custom charts with Custom components 2.0

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

⭐Custom components 2.0