website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
charts

pie-chart

9min

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.



The core structure includes:

  • For chart
    • title- Its text and verticalAlign
  • For series
    • data - Values that should be used in the graph
    • layout - Pie or Arch - the preferred type of graph you would like to use

Other options:

chart

  • subtitle - A subtitle/ short description of your chart
  • height and width - The parameters of the graph displayed (in pixels)

series

  • name - The naming of the actual series
  • color - The color that should be used in the graph

legend

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

Actions:

onPress - The possibility to add any of the actions (please refer to the list of our 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 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)
|
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 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)
|
datasources:
  pie-arch-chart-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/charts
      query: |
        SELECT 
          id, 
          json_extract(data, '$.seriesy') as y, 
          '$.color', 
          '$.category', 
          json_extract(data, '$.seriesx') as x, 
          '$.subtitle', 
          '$.title' 
        FROM [default/charts] WHERE '$.category' = "arch-chart"


See also

  • Developer reference
  • Related examples (Github)



Updated 06 Sep 2023
Did this page help you?
PREVIOUS
bar-chart
NEXT
line-chart
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Pie chart
Pie chart type arch
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service