pie-chart

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

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)

children:
  - type: component.pie-chart
    options:
      chart:
        title:
          text: Issues
          verticalAlign: center
        width: 180
        height: 180
      legend:
          isHidden: true
      series:
          - data: =[{"y":1, "color":"color4"}, {"y":2, "color":"color2"}, {"y":3, "color":"color3"}]
            dataLabels:
              - isEnabled: true
            layout: pie

pie-chart (dynamic)

datasources (dynamic)

Pie chart type 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)

children:
  - type: component.pie-chart
    options:
      chart:
        title:
          text: Stock
          verticalAlign: center
        width: 180
        height: 180
      legend:
          isHidden: true
      series:
          - data: =[{"y":1, "color":"color4"}, {"y":2, "color":"color2"}]
            dataLabels:
              - isEnabled: true
            layout: arch

arch-chart (dynamic)

datasources (dynamic)