chart
The chart widget is suitable for displaying the line-chart, bar-chart, or pie-chart on the .
Core structure | |
---|---|
chart | The configuration is the same as for the chart components, refer to the line-chart, bar-chart, or pie-chart examples. |
Other options | |
---|---|
bottom | The titles component will be added to the bottom of the widget. |
footer | Add text to the footer of the widget. |
footerAlign | Align the footer text to left, right, center. |
placeholders | Specify a placeholder text to display if there is no data, for example - title: No data to display. |
top | The titles component will be added to the top of the widget. |
In this example select the chart widget and add a component.line-chart and add a component.trend at the top to show the positive percentage trend and a component.titles at the bottom.
Example: See the complete example in GitHub.
In this example select the chart widget and add a component.line-chart and add a component.title at the top.
Example: See the complete example in GitHub.

This example is configured using a line-chart to display in the chart widget.
Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.
Datasources: See the complete datasource for static data in GitHub. See the complete datasource for dynamic data in GitHub.
In this example two line-chart widgets are combined in the group widget with the component.titles to add additional infomation.
Example: See the complete example in GitHub.
In this example select the chart widget and add a component.bar-chart and add a component.trend at the top.
Example: See the complete example in GitHub.
In this example a chart widget is used with the component.bar-chart and component.titles at the top to add a title and subtitle.
Example: See the complete example in GitHub.

This example is configured using a bar-chart to display in the chart widget.
Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.
Datasources: See the complete datasource for static data in GitHub. See the complete datasource for dynamic data in GitHub.

This example is configured using a pie-chart to display in the chart widget.
Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.
Datasources: See the complete datasource for static data in GitHub. See the complete datasource for dynamic data in GitHub.
In this example a chart widget is used with the component.pie-chart and component.titles at the top and bottom to add additional information.
Example: See the complete example in GitHub.
In this example a group widget is used to combine a chart and list widget with component.pie-chart and component.titles at the top to add additional information.
Example: See the complete example in GitHub.