Widgets

chart

8min

The chart widget is suitable for displaying the line-chart, bar-chart, or pie-chart on the .

Chart widgets
Chart widgets


Configuration options

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.

Examples and code snippets 

Line-chart 2x2
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.

Example: See the complete example in GitHub.

chart-line-1_2x2.jigx
datasource


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.

Document image

chart-line-1_2x4.jigx
datasource

Line-chart widget 4x4
Line-chart widget 4x4


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.

chart-line-2_4x4.jigx
chart-line-1_4x4.jigx

line-chart widget 4
line-chart widget


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.



line-chart-widget (static)
line-chart-widget (dynamic)

Group widget with line-charts
Group widget with line-charts


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.

combined-chart-chart-1_4x2.jigx
coin-history.jigx (function)
coin-history-etherum.jigx (function)


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.

Bar-chart widget 2x2
Bar-chart widget 2x2

chart-bar-1_2x2.jigx
datasource

Bar-chart widget 4x2
Bar-chart widget 4x2


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.

chart-bar-1_4x2.jigx
datasource

Bar-chart widget
Bar-chart widget


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.



bar-chart-widget (static)
bar-chart-widget (dynamic)

Pie-chart widget 2x2
Pie-chart widget 2x


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.



pie-chart-widget (static)
pie-chart-widget (dynamic)


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.

Pie-chart widget 2x4
Pie-chart widget 2x4

chart-pie-1_2x4.jigx
datasource




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.

Group widget 4x
Group widget 4x

combined-chart-list-1_4x2.jigx
datasource




Updated 08 Aug 2024
Doc contributor
Did this page help you?
Yes
No