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
﻿
We are currently experiencing issues with the legend of the Pie Chart component. We are working hard to fix this issue.
﻿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
﻿
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
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 - 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"
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"
﻿
﻿

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.

Updated 24 Jul 2024

Did this page help you?

line-chart

chat

pie-chart

﻿Configuration options﻿

Core structure

Other options

Actions

﻿Examples and code snippets ﻿

Pie chart

Pie chart type arch

Configuration options

Examples and code snippets