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.
Examples and code snippets
Line-chart 2x2
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.
In this example select the chart widget and add a component.line-chart and add a component.title at the top and at the bottom.
Example:
See the complete example in GitHub for the Sales performance line-chart widget.
See the complete example in GitHub for the Quarterly Company Progress.
1widgets:22x4:3type: widget.chart
4options:5chart:6type: component.pie-chart
7options:8chart:9title:10text:"67%"11verticalAlign: center
12subtitle:13text:"Battery"14verticalAlign: center
15series:16-data: =@ctx.datasources.static-data
17layout: arch
18color: positive
19top:20type: component.titles
21options:22title: Vojta iPhone
23subtitle: iPhone 14 Pro
24align: center
25icon: mobile-phone-126iconColor: color14
27bottom:28type: component.titles
29options:30title:10,75 GB (of 256 GB)
31subtitle: Available
32align: center
33icon: database-2
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.
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key