chart

The chart widget is suitable for displaying the <line-chart, bar-chart, or pie-chart on the Home Hub.

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.

Considerations

It is recommended to set either the top, bottom, or both properties when configuring a chart widget to ensure it renders correctly and maintains a clear, readable layout within the widget.

Examples and code snippets

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.

widgets:
   line1-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]
              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

datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - x: Q1/20
          y: 25000
        - x: Q2/20
          y: 32000
        - x: Q3/20
          y: 45000
        - x: Q4/20
          y: 86000

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x2
          widgetId: line1-2x2

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.

widgets:
  line1-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]
              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

datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - x: Q1/20
          y: 35000
        - x: Q2/20
          y: 32000
        - x: Q3/20
          y: 28000
        - x: Q4/20
          y: 45000

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x4
          widgetId: line1-2x4

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.

title: Line chart 2 (4x4)
type: jig.default

datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - 41456
        - 40667
        - 50445
        - 57223
  static-data2:
    type: datasource.static
    options:
      data:
        - 43445
        - 48230
        - 37230
        - 89400      
  static-data3:
    type: datasource.static
    options:
      data:
        - 45778
        - 64889
        - 20009
        - 50432   

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Placeholder
            value: Value
widgets:
  line2-4x4:
    type: widget.chart
    options:
      top:
        type: component.titles
        options:
          title: Sales Performance
      chart:
        type: component.line-chart
        
        options:
          yAxis:
            min: 0
            tickAmount: 7
            labels:
              format:
                notation: compact
                numberStyle: currency  
          xAxis:
            categories:
              - "07/22"
              - "08/22"
              - "09/22"
              - "10/22"
          series:
            - data: [email protected]
              layout: area-gradient
              animation:
                direction: bottom-to-top
              color: color7
            - data: [email protected]
              layout: area-gradient
              animation:
                direction: bottom-to-top
              color: color9
            - data: [email protected]
              layout: area-gradient
              animation:
                direction: bottom-to-top
              color: color2
      bottom: 
        type: component.titles
        options: 
          title: 110 New Paying Customers
          subtitle: Goal for 2022
          icon: multiple-neutral-2
          iconColor: color4
          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:
  line2-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]
              color: color3
              dataLabels:
                - isEnabled: true
              name: Quarterly Revenue 2022
              layout: area-gradient
          xAxis:
            categories: [email protected]
          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

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-2_4x4
          widgetId: line2-4x4

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

widgets:
  lineChartDD-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:
  lineChartStatic-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

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: line-chart-widget 
          widgetId: lineChartDD-4x2

In this example two line-chart widgets are combined in the group widget with the component.titles to add additional information.

Example: See the complete example in GitHub.

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:
  combined-chart1-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

method: GET
provider: DATA_PROVIDER_REST
parameters:
  symbol:
    value: BTC-EUR
    location: path
    type: string
    required: true
url: 'https://api.exchange.coinbase.com/products/BTC-EUR/candles'
outputTransform: >-
  $.{ "ms": $[0] * 1000, "close": $formatNumber($number($[4]), '#.00000000') }

method: GET
provider: DATA_PROVIDER_REST
parameters:
  symbol:
    value: ETH-EUR
    location: path
    type: string
    required: true
url: 'https://api.exchange.coinbase.com/products/ETH-EUR/candles'
outputTransform: >-
  $.{ "ms": $[0] * 1000, "close": $formatNumber($number($[4]), '#.00000000') }

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-chart-1_4x2
          widgetId: combined-chart1-4x2

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.

widgets:
  line1-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]
              color: color3
            - data: [email protected]
              color: positive

datasources:
  static-data-1:
    type: datasource.static
    options:
      data:
        - 10
        - 25
        - 17
        - 10
  static-data-2:
    type: datasource.static
    options:
      data:
        - 15
        - 45
        - 55
        - 65

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_2x2
          widgetId: line1-2x2

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.

widgets:
  bar1-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]
          series:
            - data: [email protected]
              color: color4
            - data: [email protected]
              color: color6

datasources:
  static-data-1:
    type: datasource.static
    options:
      data:
        - y: 10
          x: Jun
        - y: 52
          x: Jul
        - y: 49
          x: Aug
        - y: 48
          x: Sep
  static-data-2:
    type: datasource.static
    options:
      data:
        - 20
        - 52
        - 52
        - 60

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_4x2
          widgetId: bar1-4x2

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.

widgets:
  barChartStatic-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]
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false

widgets:
  barChartDD-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]
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: bar-chart-widget
          widgetId: barChartStatic-4x2

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.

widgets:
  pieChartDD-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]
                dataLabels:
                  - isEnabled: true
                layout: pie

widgets:
  pieChartStatic-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]
                dataLabels:
                  - isEnabled: true
                layout: pie

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: pie-chart-widget
          widgetId: pieChartDD-2x2

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.

widgets:
  pie1-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]
              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

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-pie-1_2x4
          widgetId: pie1-2x4

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.

widgets:
  chart-list1-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]
                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)

datasources:
  chart:
    type: datasource.static
    options:
      data:
        - y: 3
        - y: 2
          color: transparent
  list:
    type: datasource.static
    options:
      data:
        - icon: person
          task-number: Task 4
          name: Meet With Colleagues
          status: waiting     
        - icon: checklist
          task-number: Task 5
          name: Use Jigx App
          status: waiting
        - icon: synchronize-arrows-1
          task-number: Task 3
          name: Meet Your Manager
          status: done       
        - icon: synchronize-arrows-1
          task-number: Task 2
          name: Set Email & Calendar
          status: done       
        - icon: play
          task-number: Task 1
          name: Watch Jigx Intro Video
          status: done

# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-list-1_4x2
          widgetId: chart-list1-4x2

Previousavatar Nextimage

Last updated 3 months ago

Was this helpful?

Good evening

chart

Configuration options

Considerations

Examples and code snippets

Chart widget: line-chart component (2x2)

Chart widget: line-chart component (2x4)

Chart widget: line-chart component (4x4)

Chart widget - line-chart component (4x2)

Chart widget: line-chart component in group widget (4x4)

Chart widget: bar-chart component (2x2)

Chart widget: bar-chart component (4x2)

Chart widget: bar-chart component (4x2)

Chart widget: pie-chart component (2x2)

Chart widget: pie-chart component (2x4)

Chart widget: pie-chart component in group widget (4x4)