Widgets
chart

8min
The chart widget is suitable for displaying the line-chart, bar-chart, or pie-chart on the  .
Chart widgets
﻿
﻿Configuration options﻿
Core structure
﻿
chart
The configuration is the same as for the chart components, refer to the line-chart, bar-chart, or pie-chart examples.
Other options
﻿
bottom
The titles component will be added to the bottom of the widget.
footer
Add text to the footer of the widget.
footerAlign
Align the footer text to left, right, center.
placeholders
Specify a placeholder text to display if there is no data, for example - title: No data to display.
top
The titles component will be added to the top of the widget.
﻿Examples and code snippets ﻿
Line-chart 2x2
﻿
In this example select the chart widget and add a component.line-chart and add a component.trend at the top to show the positive percentage trend and a component.titles at the bottom.
Example:
See the complete example in GitHub.
chart-line-1_2x2.jigx
datasource
widgets:
   "2x2": 
   # select chart widget and then add the compoments trend and line-chart
    type: widget.chart
    options:     
      top:
        type: component.trend
        options:
          title: Quarterly Revenue
          style:
            isAlignRight: false
            isValueBottom: true
          value: 0.911111111111      
          format:
            numberStyle: percent
            
      chart:     
        type: component.line-chart
        options:
          legend:
            isHidden: false
          series:
            - data: [email protected]-data
              dataLabels:
                - isEnabled: true
              name: Quarterly Revenue 2020
              layout: area-gradient
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: long
                notation: compact
                numberStyle: currency
            min: 0
            tickAmount: 3
      bottom: 
        type: component.titles
        options:
          subtitle: Updated 1 min ago
          align: center
widgets:
   "2x2": 
   # select chart widget and then add the compoments trend and line-chart
    type: widget.chart
    options:     
      top:
        type: component.trend
        options:
          title: Quarterly Revenue
          style:
            isAlignRight: false
            isValueBottom: true
          value: 0.911111111111      
          format:
            numberStyle: percent
            
      chart:     
        type: component.line-chart
        options:
          legend:
            isHidden: false
          series:
            - data: =@ctx.datasources.static-data
              dataLabels:
                - isEnabled: true
              name: Quarterly Revenue 2020
              layout: area-gradient
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: long
                notation: compact
                numberStyle: currency
            min: 0
            tickAmount: 3
      bottom: 
        type: component.titles
        options:
          subtitle: Updated 1 min ago
          align: center
﻿
In this example select the chart widget and add a component.line-chart and add a component.title at the top.
Example:
See the complete example in GitHub.
﻿
chart-line-1_2x4.jigx
datasource
widgets:
  "2x4": 
    type: widget.chart
    options:
      top: 
        type: component.titles
        options:
          title: Company Perf.
          subtitle: "2022"
        
      chart: 
        type: component.line-chart
        options:
          plotOptions:
            series:
              marker:
                isHidden: true
          series:
            - animation:
                direction: left-to-right
              data: [email protected]-data
              name: Quarterly Revenue 2020
              color: color6
              layout: area-gradient
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
            min: 0
            max: 75000
            tickAmount: 6
widgets:
  "2x4": 
    type: widget.chart
    options:
      top: 
        type: component.titles
        options:
          title: Company Perf.
          subtitle: "2022"
        
      chart: 
        type: component.line-chart
        options:
          plotOptions:
            series:
              marker:
                isHidden: true
          series:
            - animation:
                direction: left-to-right
              data: =@ctx.datasources.static-data
              name: Quarterly Revenue 2020
              color: color6
              layout: area-gradient
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
            min: 0
            max: 75000
            tickAmount: 6
﻿
Line-chart widget 4x4
﻿
In this example select the chart widget and add a component.line-chart and add a component.title at the top and at the bottom.
Example:
See the complete example in GitHub for the Sales performance line-chart widget.
See the complete example in GitHub for the Quarterly Company Progress.
chart-line-2_4x4.jigx
chart-line-1_4x4.jigx
title: Line chart 1 (4x4)
type: jig.default

datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - x: Q1/20
          y: 25767
        - x: Q2/20
          y: 45320
        - x: Q3/20
          y: 33100
        - x: Q4/20
          y: 91750

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Placeholder
            value: Value

widgets:
  "4x4": 
    type: widget.chart
    options:
      top: 
        type: component.titles
        options:
          title: $91.750
          icon: chart
      chart: 
        type: component.line-chart
        options:
          legend:
            isHidden: false
          series:
            - animation:
                direction: left-to-right
              data: [email protected]-data
              color: color3
              dataLabels:
                - isEnabled: true
              name: Quarterly Revenue 2022
              layout: area-gradient
          xAxis:
            categories: [email protected]-data.x
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
            min: 0
            tickAmount: 5
      bottom: 
        type: component.titles
        options:
          title: Quarterly Company Progress
          subtitle: "2022"
          align: center            
title: Line chart 1 (4x4)
type: jig.default

datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - x: Q1/20
          y: 25767
        - x: Q2/20
          y: 45320
        - x: Q3/20
          y: 33100
        - x: Q4/20
          y: 91750

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Placeholder
            value: Value

widgets:
  "4x4": 
    type: widget.chart
    options:
      top: 
        type: component.titles
        options:
          title: $91.750
          icon: chart
      chart: 
        type: component.line-chart
        options:
          legend:
            isHidden: false
          series:
            - animation:
                direction: left-to-right
              data: =@ctx.datasources.static-data
              color: color3
              dataLabels:
                - isEnabled: true
              name: Quarterly Revenue 2022
              layout: area-gradient
          xAxis:
            categories: =@ctx.datasources.static-data.x
          yAxis:
            isFirstLabelHidden: true
            isFirstTickHidden: true
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
            min: 0
            tickAmount: 5
      bottom: 
        type: component.titles
        options:
          title: Quarterly Company Progress
          subtitle: "2022"
          align: center            
﻿
line-chart widget
﻿
This example is configured using a line-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub. 
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub. 
See the complete datasource for dynamic data in GitHub. 
﻿
line-chart-widget (static)
line-chart-widget (dynamic)
widgets:
  4x2:
    type: widget.chart
    options:
      chart:
        type: component.line-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: [email protected]
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
widgets:
  4x2:
    type: widget.chart
    options:
      chart:
        type: component.line-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: =@ctx.datasources.series1
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
﻿
Group widget with line-charts
﻿
In this example two line-chart widgets are combined in the group widget with the component.titles to add additional infomation.
Example:
See the complete example in GitHub.
combined-chart-chart-1_4x2.jigx
coin-history.jigx (function)
coin-history-etherum.jigx (function)
title: Chart & Chart 1 (4x2)
type: jig.default

datasources:
  bitcoin:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_REST
      entities:
        - entity: coin-history
          function: coin-history
          functionParameters:
            symbol: BTC-EUR
      query: |
        WITH cte AS (
          SELECT
            '$.ms' AS ms,
            '$.close' AS close
          FROM [coin-history]
          ORDER BY 1 DESC
        )
        SELECT
          1 - ROW_NUMBER() OVER (ORDER BY ms DESC) AS x,
          close AS y
        FROM cte
        ORDER BY
          ms DESC
        LIMIT 1 + 1 * 7

  etherum:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_REST
      entities:
        - entity: coin-history-etherum
          function: coin-history-etherum
          functionParameters:
            symbol: ETH-EUR
      query: |
        WITH cte AS (
          SELECT
            '$.ms' AS ms,
            '$.close' AS close
          FROM [coin-history-etherum]
          ORDER BY 1 DESC
        )
        SELECT
          1 - ROW_NUMBER() OVER (ORDER BY ms DESC) AS x,
          close AS y
        FROM cte
        ORDER BY
          ms DESC
        LIMIT 1 + 1 * 7

children:
  - type: component.line-chart
    options:
      chart:
        height: 300
      legend:
        isHidden: false
      yAxis:
        labels:
          format:
            numberStyle: currency
            currency: EUR
        tickAmount: 6
      series:
        # - data: [email protected].{'x':x,'y':y}
        - data: [email protected]
          color: color4
          name: Bitcoin EUR (last 7 days)
          layout: area-gradient

  - type: component.line-chart
    options:
      chart:
        height: 300
      legend:
        isHidden: false
      yAxis:
        labels:
          format:
            numberStyle: currency
            compactDisplay: short
            notation: compact
            currency: EUR
            maximumSignificantDigits: 5
            maximumFractionDigits: 5                      
        tickAmount: 3
      series:
        - data: [email protected]
          color: color4
          name: Etherum EUR (last 14 days)
          layout: area-gradient
# Add the widgets group, then the chart widget with the two line-chart components 
widgets:
  4x2:
    type: widget.group
    options:
      children:
        - type: widget.chart
          
          options:
            top: 
              type: component.titles
              options:
                title: Bitcoin
                subtitle: BTC to EUR
            chart:
              type: component.line-chart
              options:
                plotOptions:
                  series:
                    marker:
                      isHidden: true
                legend:
                  isHidden: false
                xAxis:
                  isHidden: true
                yAxis:
                  labels:
                    format:
                      numberStyle: currency
                      compactDisplay: long
                      notation: standard
                      currency: EUR
                      maximumSignificantDigits: 5
                      maximumFractionDigits: 5
                  tickAmount: 3
                series:
                  - data: [email protected]
                    color: color4
                    name: Bitocin EUR (last 14 days)
                    layout: area-gradient

        - type: widget.chart
          options:
            top:
              type: component.titles
              options:
                title: Etherum
                subtitle: BTC to EUR
            chart:
              type: component.line-chart
              options:
                plotOptions:
                  series:
                    marker:
                      isHidden: true
                legend:
                  isHidden: false
                xAxis:
                  isHidden: true
                yAxis:
                  labels:
                    format:
                      numberStyle: currency
                      compactDisplay: short
                      notation: compact
                      currency: EUR
                      maximumSignificantDigits: 5
                      maximumFractionDigits: 5                      
                  tickAmount: 3
                series:
                  - data: [email protected]
                    color: color4
                    name: Etherum EUR (last 14 days)
                    layout: area-gradient

title: Chart & Chart 1 (4x2)
type: jig.default

datasources:
  bitcoin:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_REST
      entities:
        - entity: coin-history
          function: coin-history
          functionParameters:
            symbol: BTC-EUR
      query: |
        WITH cte AS (
          SELECT
            '$.ms' AS ms,
            '$.close' AS close
          FROM [coin-history]
          ORDER BY 1 DESC
        )
        SELECT
          1 - ROW_NUMBER() OVER (ORDER BY ms DESC) AS x,
          close AS y
        FROM cte
        ORDER BY
          ms DESC
        LIMIT 1 + 1 * 7

  etherum:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_REST
      entities:
        - entity: coin-history-etherum
          function: coin-history-etherum
          functionParameters:
            symbol: ETH-EUR
      query: |
        WITH cte AS (
          SELECT
            '$.ms' AS ms,
            '$.close' AS close
          FROM [coin-history-etherum]
          ORDER BY 1 DESC
        )
        SELECT
          1 - ROW_NUMBER() OVER (ORDER BY ms DESC) AS x,
          close AS y
        FROM cte
        ORDER BY
          ms DESC
        LIMIT 1 + 1 * 7

children:
  - type: component.line-chart
    options:
      chart:
        height: 300
      legend:
        isHidden: false
      yAxis:
        labels:
          format:
            numberStyle: currency
            currency: EUR
        tickAmount: 6
      series:
        # - data: =@ctx.datasources.bitcoin.{'x':x,'y':y}
        - data: =@ctx.datasources.bitcoin
          color: color4
          name: Bitcoin EUR (last 7 days)
          layout: area-gradient

  - type: component.line-chart
    options:
      chart:
        height: 300
      legend:
        isHidden: false
      yAxis:
        labels:
          format:
            numberStyle: currency
            compactDisplay: short
            notation: compact
            currency: EUR
            maximumSignificantDigits: 5
            maximumFractionDigits: 5                      
        tickAmount: 3
      series:
        - data: =@ctx.datasources.etherum
          color: color4
          name: Etherum EUR (last 14 days)
          layout: area-gradient
# Add the widgets group, then the chart widget with the two line-chart components 
widgets:
  4x2:
    type: widget.group
    options:
      children:
        - type: widget.chart
          
          options:
            top: 
              type: component.titles
              options:
                title: Bitcoin
                subtitle: BTC to EUR
            chart:
              type: component.line-chart
              options:
                plotOptions:
                  series:
                    marker:
                      isHidden: true
                legend:
                  isHidden: false
                xAxis:
                  isHidden: true
                yAxis:
                  labels:
                    format:
                      numberStyle: currency
                      compactDisplay: long
                      notation: standard
                      currency: EUR
                      maximumSignificantDigits: 5
                      maximumFractionDigits: 5
                  tickAmount: 3
                series:
                  - data: =@ctx.datasources.bitcoin
                    color: color4
                    name: Bitocin EUR (last 14 days)
                    layout: area-gradient

        - type: widget.chart
          options:
            top:
              type: component.titles
              options:
                title: Etherum
                subtitle: BTC to EUR
            chart:
              type: component.line-chart
              options:
                plotOptions:
                  series:
                    marker:
                      isHidden: true
                legend:
                  isHidden: false
                xAxis:
                  isHidden: true
                yAxis:
                  labels:
                    format:
                      numberStyle: currency
                      compactDisplay: short
                      notation: compact
                      currency: EUR
                      maximumSignificantDigits: 5
                      maximumFractionDigits: 5                      
                  tickAmount: 3
                series:
                  - data: =@ctx.datasources.etherum
                    color: color4
                    name: Etherum EUR (last 14 days)
                    layout: area-gradient
﻿
In this example select the chart widget and add a component.bar-chart and add a component.trend at the top.
Example:
See the complete example in GitHub.
Bar-chart widget 2x2
﻿
chart-bar-1_2x2.jigx
datasource
widgets:
  2x2:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "This Month"
          value: +11.81818181818
          
          format:
            numberStyle: unit
            unit: percent
             
          style:
            isAlignRight: true
            isValueHidden: false
            isValueBottom: true
      chart:
        type: component.bar-chart
        options:
          plotOptions:
            series:
              pointWidth: 12
          yAxis:
            max: 80
            min: 0
            tickAmount: 3
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
          xAxis:
            categories:
              - Aug
              - Sep
              - Oct
              - Nov
          series:
            - data: [email protected]-data-1
              color: color3
            - data: [email protected]-data-2
              color: positive
widgets:
  2x2:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "This Month"
          value: +11.81818181818
          
          format:
            numberStyle: unit
            unit: percent
             
          style:
            isAlignRight: true
            isValueHidden: false
            isValueBottom: true
      chart:
        type: component.bar-chart
        options:
          plotOptions:
            series:
              pointWidth: 12
          yAxis:
            max: 80
            min: 0
            tickAmount: 3
            labels:
              format:
                compactDisplay: short
                notation: compact
                numberStyle: currency
          xAxis:
            categories:
              - Aug
              - Sep
              - Oct
              - Nov
          series:
            - data: =@ctx.datasources.static-data-1
              color: color3
            - data: =@ctx.datasources.static-data-2
              color: positive
﻿
Bar-chart widget 4x2
﻿
In this example a chart widget is used with the component.bar-chart and component.titles at the top to add a title and subtitle.
Example:
See the complete example in GitHub.
chart-bar-1_4x2.jigx
datasource
widgets:
  4x2:
    type: widget.chart
    options:
      top:
        type: component.titles
        options:
         title: New Employees
         subtitle: "2021 vs. 2022"
         icon: multiple-neutral-2
         iconColor: color4
      chart:
        type: component.bar-chart
        options:
          plotOptions:
            series:
              pointWidth: 8
          yAxis:
            max: 100
          xAxis:
            categories: [email protected]-data-1.x
          series:
            - data: [email protected]-data-1
              color: color4
            - data: [email protected]-data-2
              color: color6                  
widgets:
  4x2:
    type: widget.chart
    options:
      top:
        type: component.titles
        options:
         title: New Employees
         subtitle: "2021 vs. 2022"
         icon: multiple-neutral-2
         iconColor: color4
      chart:
        type: component.bar-chart
        options:
          plotOptions:
            series:
              pointWidth: 8
          yAxis:
            max: 100
          xAxis:
            categories: =@ctx.datasources.static-data-1.x
          series:
            - data: =@ctx.datasources.static-data-1
              color: color4
            - data: =@ctx.datasources.static-data-2
              color: color6                  
﻿
Bar-chart widget
﻿
This example is configured using a bar-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub.
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub.
See the complete datasource for dynamic data in GitHub.
﻿
bar-chart-widget (static)
bar-chart-widget (dynamic)
widgets:
  4x2:
    type: widget.chart
    options:
      chart:
        type: component.bar-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: [email protected]-dynamic
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false
widgets:
  4x2:
    type: widget.chart
    options:
      chart:
        type: component.bar-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: =@ctx.datasources.series1-dynamic
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false
﻿
Pie-chart widget 2x
﻿
This example is configured using a pie-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub.
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub.
See the complete datasource for dynamic data in GitHub.
﻿
pie-chart-widget (static)
pie-chart-widget (dynamic)
widgets:
  2x2:
    type: widget.chart
    options:
      chart:
        type: component.pie-chart
        options:
          chart:
            title:
              text: Issues
              verticalAlign: center
            width: 120
            height: 120
          legend:
            isHidden: true
          series:
              - data: [email protected]-chart-dynamic
                dataLabels:
                  - isEnabled: true
                layout: pie
widgets:
  2x2:
    type: widget.chart
    options:
      chart:
        type: component.pie-chart
        options:
          chart:
            title:
              text: Issues
              verticalAlign: center
            width: 120
            height: 120
          legend:
            isHidden: true
          series:
              - data: =@ctx.datasources.pie-chart-dynamic
                dataLabels:
                  - isEnabled: true
                layout: pie
﻿
In this example a chart widget is used with the component.pie-chart and component.titles at the top and bottom to add additional information.
Example:
See the complete example in GitHub.
Pie-chart widget 2x4
﻿
chart-pie-1_2x4.jigx
datasource
widgets:
  2x4: 
    type: widget.chart
    options:        
      chart: 
        type: component.pie-chart
        options:
          chart:
            title:
              text: "67%"
              verticalAlign: center
            subtitle:
              text: "Battery"
              verticalAlign: center              
          series:
            - data: [email protected]-data
              layout: arch
              color: positive
      top:
        type: component.titles
        options:
          title: Vojta iPhone
          subtitle: iPhone 14 Pro
          align: center
          icon: mobile-phone-1
          iconColor: color14
      bottom:
        type: component.titles
        options:
          title: 10,75 GB (of 256 GB)          
          subtitle: Available
          align: center
          icon: database-2
widgets:
  2x4: 
    type: widget.chart
    options:        
      chart: 
        type: component.pie-chart
        options:
          chart:
            title:
              text: "67%"
              verticalAlign: center
            subtitle:
              text: "Battery"
              verticalAlign: center              
          series:
            - data: =@ctx.datasources.static-data
              layout: arch
              color: positive
      top:
        type: component.titles
        options:
          title: Vojta iPhone
          subtitle: iPhone 14 Pro
          align: center
          icon: mobile-phone-1
          iconColor: color14
      bottom:
        type: component.titles
        options:
          title: 10,75 GB (of 256 GB)          
          subtitle: Available
          align: center
          icon: database-2
﻿
﻿
In this example a group widget is used to combine a chart and list widget  with component.pie-chart and  component.titles at the top to add additional information.
Example:
See the complete example in GitHub.
Group widget 4x
﻿
combined-chart-list-1_4x2.jigx
datasource
widgets:
  4x2: 
    type: widget.group
    options:
      children:
        - type: widget.chart
          options:        
            chart: 
              type: component.pie-chart
              options:
                chart:
                  title: 
                    text: "3 of 5"
                    verticalAlign: center
                  subtitle: 
                    text: Done
                    verticalAlign: center
            
                series:
                  - data: [email protected]
                    layout: pie
                    color: color3
            top:
              type: component.titles
              options:
                title: Onboarding
                subtitle: Jigx, Inc.
                align: center   

        - type: widget.list
          options:
            data: [email protected]
            item: 
              type: component.list-item
              options:
                color:
                  - when: =(@ctx.current.item.status = 'done' ? true :false)
                    color: color14
                  - when: =(@ctx.current.item.status = 'waiting' ? true :false)
                    color: color1
                title: [email protected]-number
                subtitle: [email protected]
                leftElement: 
                  element: checkbox
                  value: =(@ctx.current.item.status = 'done' ? true :false)
                style:
                  isStrikeThrough: =(@ctx.current.item.status = 'done' ? true :false)
                  isDisabled: =(@ctx.current.item.status = 'done' ? true :false)
 
widgets:
  4x2: 
    type: widget.group
    options:
      children:
        - type: widget.chart
          options:        
            chart: 
              type: component.pie-chart
              options:
                chart:
                  title: 
                    text: "3 of 5"
                    verticalAlign: center
                  subtitle: 
                    text: Done
                    verticalAlign: center
            
                series:
                  - data: =@ctx.datasources.chart
                    layout: pie
                    color: color3
            top:
              type: component.titles
              options:
                title: Onboarding
                subtitle: Jigx, Inc.
                align: center   

        - type: widget.list
          options:
            data: =@ctx.datasources.list
            item: 
              type: component.list-item
              options:
                color:
                  - when: =(@ctx.current.item.status = 'done' ? true :false)
                    color: color14
                  - when: =(@ctx.current.item.status = 'waiting' ? true :false)
                    color: color1
                title: =@ctx.current.item.task-number
                subtitle: =@ctx.current.item.name
                leftElement: 
                  element: checkbox
                  value: =(@ctx.current.item.status = 'done' ? true :false)
                style:
                  isStrikeThrough: =(@ctx.current.item.status = 'done' ? true :false)
                  isDisabled: =(@ctx.current.item.status = 'done' ? true :false)
 
﻿
﻿
Core structure
chart	The configuration is the same as for the chart components, refer to the line-chart, bar-chart, or pie-chart examples.
Other options
bottom	The titles component will be added to the bottom of the widget.
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
placeholders	Specify a placeholder text to display if there is no data, for example - title: No data to display.
top	The titles component will be added to the top of the widget.