Chart
Chart is a component to visualize your data. There are several chart types in UI Bakery:
bar;
line;
pie;
doughnut.
Methods
setData(data: Array)
sets data for the chart
Triggers
Triggers allow you to launch certain actions based on different events.
On Click
Calls for an action when you click on a data point on a chart
On Init
Calls for an action on component initialization
Working with the chart
Let's add a simple chart that will show the number of products per product vendor.
Add an action that loads the product list from the database.
Bring a chart to the working area and refer to that action in the Data field:
{{actions.loadProducts.data}}
.Select a chart type. We'll use a pie chart for the example. Configure the appearance of the chart's legend.
Next, adjust the X and Y axis with the necessary values. Expand the Series tab. On the X axis, select the product vendor field to be grouped by value. On the Y axis, set product field grouped by count.

Custom charts with ECharts library
To enhance your chart beyond the default options available in UI Bakery, use the built-in ECharts library access. Here's a list of more than 100 options available in Echarts library.
Enable the EChart option under the Chart definition setting:

Copy the required chart code into the Config field. The documentation on the ECharts is available here.

You can access the ECharts instance using the variable {{ui.chart.instance}}
or directly utilize the ECharts library through the global variable echarts
.
For instance, to render this map example, which requires a custom SVG map registered, follow the steps below:
Create a new action to download and register a map available here https://echarts.apache.org/examples/data/asset/geo/Map_of_Iceland.svg and to return the map configuration.
The first action step involves an HTTP API call to fetch the SVG map.

Note the transformer code
atob({{data.base64}});
, to extract the requested map content from a base64 value.The second step involves JavaScript code that registers the map and returns the options:
// 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],
],
},
}

Last step - assign the action to the chart component:

Adding a custom chart
You can improve the chart and build your own by using a custom component. Please refer to this guide:
Custom componentsLast updated
Was this helpful?