Chart

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

• bar;

• line;

• pie;

• doughnut.

Methods

Method	Description
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.

1. Add an action that loads the product list from the database.

2. Bring a chart to the working area and refer to that action in the Data field: {{actions.loadProducts.data}}.

3. Select a chart type. We'll use a pie chart for the example. Configure the appearance of the chart's legend.

4. 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 components