Widgets
content of widgets
group
7min
The group widget can be used for combinations of your widgets.
The group widget can be used only on sizes: 2x4, 4x2, and 4x4.
The core structure includes: children
- The children property includes all widgets available - the combination of 2 of them is typical for group widget
The group with Chart and List (size: 4x4, split: horizontal)

For the 4x4 widget, we have a split option. In this property, we can choose a vertical or horizontal layout for the widget. In this case, we chose a combination of a chart and a list in a horizontal split.
Examples:
See the full example using static data in GitHub.
group-ChartList (static)
|
widgets: "4x4": type: widget.group options: split: horizontal children: - type: widget.chart options: chart: type: component.line-chart options: chart: isAnimated: true yAxis: min: 0 labels: format: numberStyle: currency compactDisplay: short notation: compact tickAmount: 8 isFirstTickHidden: true isFirstLabelHidden: true xAxis: categories: - Q1 - Q2 - Q3 - Q4 series: - data: =[{"x":"Q1/20", "y":25000, "color":"color2"}, {"x":"Q2/20", "y":32000, "color":"color2"}, {"x":"Q3/20", "y":45000, "color":"color2"}, {"x":"Q4/20", "y":86000, "color":"color2"}] name: Year 2019 animation: direction: left-to-right layout: area-gradient dataLabels: - isEnabled: true - data: =[{"x":"Q1/20", "y":12000, "color":"color3"}, {"x":"Q2/20", "y":48000, "color":"color3"}, {"x":"Q3/20", "y":36000, "color":"color3"}, {"x":"Q4/20", "y":120000, "color":"color3"}] name: Year 2020 animation: direction: left-to-right layout: area-gradient dataLabels: - isEnabled: true legend: isHidden: false - type: widget.list options: data: =@ctx.datasources.transactions item: type: component.list-item options: divider: solid title: =@ctx.current.item.company subtitle: =@ctx.current.item.description description: =$fromMillis($toMillis(@ctx.current.item.date), '[M01]/[D01]/[Y01]') label: title: =@ctx.current.item.amount & '$' isHidden: false color: - when: =(@ctx.current.item.positive = true) color: color2 - when: =(@ctx.current.item.positive = false) color: color4 leftElement: element: icon icon: =@ctx.current.item.positive = true ? 'up' :'down' style: isPositive: =@ctx.current.item.positive isError: =@ctx.current.item.positive = false ? "true" :"false"
The group with Chart and List (size: 4x4, split: vertical)

Examples:
See the full example using static data in GitHub.
group-ChartListVertical (static)
|
widgets: "4x4": type: widget.group options: split: vertical children: - type: widget.chart options: chart: type: component.line-chart options: xAxis: isHidden: true yAxis: max: 6 min: 3 series: - data: =@ctx.datasources.chart color: color1 layout: area-gradient top: type: component.titles options: title: Solana subtitle: USDT align: left icon: currency-dollar iconColor: color2 bottom: type: component.trend options: title: 92,40 USDT / SOL style: isAlignRight: false isValueBottom: true value: +21.2 format: numberStyle: unit unit: percent - type: widget.list options: data: =@ctx.datasources.list item: type: component.list-item options: title: =@ctx.current.item.title subtitle: =@ctx.current.item.subtitle label: title: =@ctx.current.item.change > 0 ? '+' & @ctx.current.item.change :@ctx.current.item.change color: - when: =@ctx.current.item.change > 0 color: color2 - when: =@ctx.current.item.change < 0 color: color4
In this case, we also selected a combination of graph and list. This example is in a vertical split.
The group with Avatar and List (size: 4x2)

group-avatar-list (static)
group-avatar-list (Dynamic)
|
widgets: 4x2: type: widget.group options: children: - type: widget.avatar options: text: '' uri: =@ctx.datasources.avatar-dynamic.photo - type: widget.list options: data: =@ctx.datasources.employees-dynamic item: type: component.list-item options: title: =@ctx.current.item.firstname subtitle: =@ctx.current.item.lastname leftElement: element: avatar text: '' uri: =@ctx.current.item.photo
Group with Value and Bar chart (size: 2x4)

group-value-bar-chart (static)
group-value-chart (dynamic)
|
widgets: 2x4: type: widget.group options: children: - type: widget.value options: value: =@ctx.datasources.value-dynamic.value top: type: component.titles options: title: Daily revenue - type: widget.chart options: chart: type: component.bar-chart options: series: - data: =@ctx.datasources.series1-dynamic