Chart
Chart is a component to visualize your data. There are several chart types in UI Bakery:
- bar;
- line;
- pie;
- doughnut.
Method | Description |
|---|---|
setData(data: Array) | sets data for the chart |
Triggers allow you to launch certain actions upon 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 |
Let's add a simple chart that will show the amount of products per each product vendor.
- 1.Add an action that load 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.
If you need to enhance your chart, you can use the ECharts option built in UI Bakery. Just copy the required chart code into the Config field. The documentation on the ECharts is available here.
You can improve the chart and build your own by using a custom component. Please refer to this guide:
Last modified 1mo ago