chart

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

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.

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

Chart widget: line-chart component (2x2)

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

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

datasource

grid-item

Chart widget: line-chart component (2x4)

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.

Line Chart widget

chart-line-1_2x4.jigx

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

datasource

grid-item

Chart widget: line-chart component (4x4)

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

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

chart-line-1_4x4.jigx

grid-item

Chart widget - line-chart component (4x2)

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)

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

line-chart-widget (dynamic)

grid-item

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

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 information.

Example: See the complete example in GitHub.

combined-chart-chart-1_4x2.jigx

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

coin-history.jigx (function)

coin-history-etherum.jigx (function)

grid-item

Chart widget: bar-chart component (2x2)

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

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

datasource

grid-item

Chart widget: bar-chart component (4x2)

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

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                  

datasource

grid-item

Chart widget: bar-chart component (4x2)

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)

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

bar-chart-widget (dynamic)

grid-item

Chart widget: pie-chart component (2x2)

Pie-chart widget 2x2

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)

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

pie-chart-widget (dynamic)

grid-item

Chart widget: pie-chart component (2x4)

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

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

datasource

grid-item

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

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 4x4

combined-chart-list-1_4x2.jigx

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)
 

datasource

grid-item