# chart

{% columns %}
{% column %}
The chart widget is suitable for displaying the <[line-chart](https://docs.jigx.com/examples/line-chart), [bar-chart](https://docs.jigx.com/examples/bar-chart), or [pie-chart](https://docs.jigx.com/examples/pie-chart) on the Home Hub.
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2F6o8Dx3mtPWEt9hu9DlZo%2FWD-charts.PNG?alt=media&#x26;token=b11c6a31-c0d1-401c-bb79-2af41735ca7f" alt="Chart widgets" width="188"><figcaption><p>Chart widgets</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Configuration options

<table><thead><tr><th width="142.81640625">Core structure</th><th></th></tr></thead><tbody><tr><td><code>chart</code></td><td>The configuration is the same as for the chart components, refer to the <a href="https://docs.jigx.com/examples/line-chart">line-chart</a>, <a href="https://docs.jigx.com/examples/bar-chart">bar-chart</a>, or <a href="https://docs.jigx.com/examples/pie-chart">pie-chart</a> examples.</td></tr></tbody></table>

<table><thead><tr><th width="142.23046875">Other options</th><th></th></tr></thead><tbody><tr><td><code>bottom</code></td><td>The <a href="https://docs.jigx.com/examples/titles">titles</a> component will be added to the bottom of the widget.</td></tr><tr><td><code>footer</code></td><td>Add text to the footer of the widget.</td></tr><tr><td><code>footerAlign</code></td><td>Align the footer text to <code>left</code>, <code>right</code>, <code>center</code>.</td></tr><tr><td><code>placeholders</code></td><td>Specify a placeholder text to display if there is no data, for example - <code>title: No data to display</code>.</td></tr><tr><td><code>top</code></td><td>The <a href="https://docs.jigx.com/examples/titles">titles</a> component will be added to the top of the widget.</td></tr></tbody></table>

## 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)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FaVWewFHjjIT5Jtvjhvfq%2FWD-chartline22.PNG?alt=media&#x26;token=b3bfbd24-0be1-40dc-aab6-5069b2c39266" alt="Line-chart 2x2" width="188"><figcaption><p>Line-chart 2x2</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/2x2/chart-line-1_2x2.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-line-1\_2x2.jigx" %}

```yaml
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: =@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
```

{% endtab %}

{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: line-chart component (2x4)

{% columns %}
{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/2x4/chart-line-1_2x4.jigx).
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FXRCKYIpeRIM2VdwzMJXn%2FWD-chartline24.PNG?alt=media&#x26;token=78bc72a1-5cf3-46d8-83e7-c82cca3ac7b1" alt="Line Chart widget" width="188"><figcaption><p>Line Chart widget</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-line-1\_2x4.jigx" %}

```yaml
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: =@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
```

{% endtab %}

{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: line-chart component (4x4)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FfGHxLdIAVErgwavBGq2J%2FWD-line44.PNG?alt=media&#x26;token=c6de83f2-1514-4446-9360-9a6d54a51603" alt="Line-chart widget 4x4"><figcaption><p>Line-chart widget 4x4</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x4/chart-line-2_4x4.jigx) for the Sales performance line-chart widget. See the complete example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x4/chart-line-1_4x4.jigx) for the Quarterly Company Progress.
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-line-2\_4x4.jigx" %}

```yaml
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: =@ctx.datasources.static-data
              layout: area-gradient
              animation:
                direction: bottom-to-top
              color: color7
            - data: =@ctx.datasources.static-data2
              layout: area-gradient
              animation:
                direction: bottom-to-top
              color: color9
            - data: =@ctx.datasources.static-data3
              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
```

{% endtab %}

{% tab title="chart-line-1\_4x4.jigx" %}

```yaml
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: =@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            
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget - line-chart component (4x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FmOkc9HOdLL8gqyZeYkig%2Fwd-linechart-4x2.png?alt=media&#x26;token=f2df5653-257d-409a-8f6a-8cdd71f1ea17" alt="line-chart widget" width="188"><figcaption><p>line-chart widget</p></figcaption></figure>
{% endcolumn %}

{% column %}
This example is configured using a line-chart to display in the chart widget.

**Examples**: See the complete example using static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/static-data/chart-widget-with-line-chart/chart-widget-line-chart.jigx). See the complete example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/dynamic-data/chart-widget-with-line-chart/chart-widget-line-dynamic.jigx).

**Datasources**: See the complete datasource for static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/static/series1.jigx). See the complete datasource for dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/dynamic/series1-dynamic.jigx)
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="line-chart-widget (static)" %}

```yaml
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: =@ctx.datasources.series1
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
```

{% endtab %}

{% tab title="line-chart-widget (dynamic)" %}

```yaml
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: =@ctx.datasources.series1-dynamic
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

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

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FR6GpzriBHeS3ytbdXgWn%2FWD-lineGroup.PNG?alt=media&#x26;token=8de29ee2-e064-42c8-86ad-3950c4e1cf5e" alt="Group widget with line-charts" width="188"><figcaption><p>Group widget with line-charts</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x2/combined-chart-chart-1_4x2.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="combined-chart-chart-1\_4x2.jigx" %}

```yaml
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:
  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: =@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

```

{% endtab %}

{% tab title="coin-history.jigx (function)" %}

```yaml
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') }
```

{% endtab %}

{% tab title="coin-history-etherum.jigx (function)" %}

```yaml
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') }
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: bar-chart component (2x2)

{% columns %}
{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/2x2/chart-line-1_2x2.jigx).
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FilewFCVBqSJEAVgmPwHv%2FWD-bar22.PNG?alt=media&#x26;token=878cad80-7ae3-4d09-bc6a-b9a51f544f49" alt="Bar-chart widget 2x2" width="188"><figcaption><p>Bar-chart widget 2x2</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-bar-1\_2x2.jigx" %}

```yaml
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: =@ctx.datasources.static-data-1
              color: color3
            - data: =@ctx.datasources.static-data-2
              color: positive
```

{% endtab %}

{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: bar-chart component (4x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FCw3LtPTo1pKHg8ieV0D6%2FWD-bar42.PNG?alt=media&#x26;token=bb54acaf-430a-4c97-b335-3005e484e7a1" alt="Bar-chart widget 4x2" width="188"><figcaption><p>Bar-chart widget 4x2</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x2/chart-bar-1_4x2.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-bar-1\_4x2.jigx" %}

```yaml
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: =@ctx.datasources.static-data-1.x
          series:
            - data: =@ctx.datasources.static-data-1
              color: color4
            - data: =@ctx.datasources.static-data-2
              color: color6                  
```

{% endtab %}

{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: bar-chart component (4x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FJkjKGHJWVEnXk3rGrGH3%2Fwd-barchart42.png?alt=media&#x26;token=f8f4a93f-f819-453b-834f-6d214f620539" alt="Bar-chart widget" width="188"><figcaption><p>Bar-chart widget</p></figcaption></figure>
{% endcolumn %}

{% column %}
This example is configured using a bar-chart to display in the chart widget.

**Examples**: See the complete example using static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/static-data/chart-widget-with-bar-chart/chart-widget-bar-chart.jigx). See the complete example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/dynamic-data/chart-widget-with-bar-chart/chart-widget-bar-dynamic.jigx).

**Datasources**: See the complete datasource for static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/static/series1.jigx). See the complete datasource for dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/dynamic/series1-dynamic.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="bar-chart-widget (static)" %}

```yaml
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: =@ctx.datasources.series1
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false
```

{% endtab %}

{% tab title="bar-chart-widget (dynamic)" %}

```yaml
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: =@ctx.datasources.series1-dynamic
              name: Year 2019
              dataLabels:
                - isEnabled: false
          legend:
            isHidden: false
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: pie-chart component (2x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FQbAeXn6eUGMMEACZzLG1%2Fwd-piechart22.png?alt=media&#x26;token=20f6b7d5-fa62-437e-8564-21e073885f5e" alt="Pie-chart widget 2x2" width="188"><figcaption><p>Pie-chart widget 2x2</p></figcaption></figure>
{% endcolumn %}

{% column %}
This example is configured using a pie-chart to display in the chart widget.

**Examples**: See the complete example using static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/static-data/chart-widget-with-pie-chart/chart-widget-pie-chart.jigx). See the complete example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/chart/dynamic-data/chart-widget-with-pie-chart/chart-widget-pie-dynamic.jigx).

**Datasources**: See the complete datasource for static data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/static/pie-chart-data.jigx). See the complete datasource for dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/charts/dynamic/pie-chart-dynamic.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="pie-chart-widget (static)" %}

```yaml
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: =@ctx.datasources.pie-chart-data
                dataLabels:
                  - isEnabled: true
                layout: pie
```

{% endtab %}

{% tab title=" pie-chart-widget (dynamic)" %}

```yaml
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: =@ctx.datasources.pie-chart-dynamic
                dataLabels:
                  - isEnabled: true
                layout: pie
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

## Chart widget: pie-chart component (2x4)

{% columns %}
{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/2x4/chart-pie-1_2x4.jigx).
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FxMHXh7Ebmf1uyf1NAJP7%2FWD-pie2x4.PNG?alt=media&#x26;token=513e4a34-0cc6-4aba-8913-5e6c845041cc" alt="Pie-chart widget 2x4" width="188"><figcaption><p>Pie-chart widget 2x4</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="chart-pie-1\_2x4.jigx" %}

```yaml
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: =@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
```

{% endtab %}

{% tab title="datasource" %}

```yaml
datasources:
  static-data:
    type: datasource.static
    options:
      data:
        - y: 67
        - y: 23
          color: transparent
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}

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

{% columns %}
{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x2/combined-chart-list-1_4x2.jigx).
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FwYZa8W1z2NyTDsECvsM4%2FWD-combinedpie.PNG?alt=media&#x26;token=65e485d3-da16-4dc6-870d-0ac1186ef260" alt="Group widget 4x4" width="188"><figcaption><p>Group widget 4x4</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="combined-chart-list-1\_4x2.jigx" %}

```yaml
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: =@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)
 
```

{% endtab %}

{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# 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
```

{% endtab %}
{% endtabs %}