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
Pie Chart preview
circle-exclamation

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
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 GitHubarrow-up-right. See the full code sample using dynamic data in GitHubarrow-up-right.

Datasources: See the full datasource code sample for dynamic data in GitHubarrow-up-right.

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 type arch

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 GitHubarrow-up-right. See the full code sample using dynamic data in GitHubarrow-up-right.

Datasources: See the full datasource code sample for dynamic data in GitHubarrow-up-right.

Last updated

Was this helpful?