Components
charts

pie-chart

5min

The component can be used to display statistics related to data records. Mostly used in jig.default or jig.list.

Pie Chart Preview
Pie Chart Preview


We are currently experiencing issues with the legend of the Pie Chart component. We are working hard to fix this issue.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core structure



chart

title- Its text and verticalAlign.

series

data - values to be used in the chart. layout - Pie or Arch - the availabe types of chart.

Other options



chart

title and subtitle - Name and a short description of your chart. height and width - The parameters of the chart displayed (in pixels).

legend

isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the chart.

series

name - The naming of the actual series. color- select a color from the color palette.

Actions



onPress

The ability to add any of the actions (please refer to the list of Actions). This action(s) will be triggered as a reaction to the press event.

Examples and code snippets 

Pie Chart
Pie Chart


This jig displays a complete pie chart. In this example, these are issues where green shows resolved issues, yellow issues in progress, and red unresolved issues.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for dynamic data in GitHub.

pie-chart (static)
pie-chart (dynamic)
datasources (dynamic)

Pie chart - arch
Pie chart - arch


This jig displays an arc pie chart. This example shows the occupancy in a warehouse; the green color shows available space and the red color indicates occupied space.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for dynamic data in GitHub.

arch-chart (static)
arch-chart (dynamic)
datasources (dynamic)




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No