Widgets
chart

5min
The chart widget is suitable for displaying the chart on the main page - line-chart, bar-chart, or pie-chart components.
﻿Configuration options﻿
The core structure includes:  chart 
The configuration is the same as for the chart components, so please refer to the line-chart, bar-chart, or pie-chart section.
﻿Examples and code snippets ﻿
Chart widget with line-chart component
﻿
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for static data in GitHub. 
See the full 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: =@ctx.datasources.series1
              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
﻿
Chart widget with bar-chart component
﻿
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for static data in GitHub.
See the full 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: =@ctx.datasources.series1-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
﻿
Chart widget with pie-chart component
﻿
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for static data in GitHub.
See the full 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: =@ctx.datasources.pie-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
﻿
See also
﻿Developer reference  
﻿Widgets samples solution - It can be downloaded on Jigx Management (Quick Start section)
﻿