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
Enable the EChart option under the Chart definition setting:
You can access the ECharts instance using the variable {{ui.chart.instance}}
or directly utilize the ECharts library through the global variable echarts
.
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:
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:
Last updated
Was this helpful?