trend

4min

The trend component displays an increase or decrease over a period. The increment or decrement number can be formatted as a percentage, currency, or plain value.
Trend is available in the following content widgets: 
﻿Chart widget﻿
﻿List widget﻿
﻿Value widget﻿
﻿Configuration options﻿
Core structure
﻿
value
Positive or negative numeric value.
format
A selection of formats is available for the main value of the widget, for example, currency.
title
Display a title for the trend.
subtitle
Add a subtitle under the title text. Note: this text won't be displayed if isValueBottom is set to true
style
Properties used for component styling.
- isValueBottom - By default, the value is on the right of the text.  Set the property to true to move it underneath the text.
- isValueHidden - hides the number and only shows an icon indicating an up or down trend.
- isAlignRight - aligns everything to the right.
﻿Examples and code snippets ﻿
Trend on value widget
Upward trend
﻿
This example shows an increase in company turnover. The company has a turnover of over 24K USD, and the trend component shows that the increase for the last week is 1250 USD.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub. 
trend-value (static)
trend-value (dynamic)
widgets:
  2x2:
    type: widget.value
    options:
      value: '23850'
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: 'Last week'
          value: +1250
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
widgets:
  2x2:
    type: widget.value
    options:
      value: '23850'
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: 'Last week'
          value: +1250
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
﻿
Trend on chart widget
Percentage trend
﻿
This example shows finance statistics. The trend component, indicates an increase in percent. Exactly 21% in the last period.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
﻿
trend-chart (static)
trend-chart (dynamic)
widgets:
  4x4:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "$ 39,559.36"
          value: 0.21
          format:
            numberStyle: percent
          style:
            isAlignRight: true
            isValueBottom: true
      chart:
        type: component.line-chart
        options:
          chart:
            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:
  4x4:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "$ 39,559.36"
          value: 0.21
          format:
            numberStyle: percent
          style:
            isAlignRight: true
            isValueBottom: true
      chart:
        type: component.line-chart
        options:
          chart:
            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
﻿
Trend on list widget
Patient trend over a period
﻿
In this example, the widget-list shows a list of patients. There are a total of 569 patients and the trend component shows that 12 more patients were added in the last period.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
trend-list (static)
trend-list (dynamic)
widgets:
  2x2:
    type: widget.list
    options:
      data: [email protected]-dynamic
      top:
        type: component.trend
        options:
          title: "569 Patients"
          subtitle: "Patients"
          value: 12
          style:
            isAlignRight: false
            isValueBottom: true
            isValueHidden: false
      item:
        type: component.list-item
        options:
          title: [email protected] & ' ' & @ctx.current.item.lastname
          leftElement: 
            element: avatar
            text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
            uri: [email protected]
widgets:
  2x2:
    type: widget.list
    options:
      data: =@ctx.datasources.employees-dynamic
      top:
        type: component.trend
        options:
          title: "569 Patients"
          subtitle: "Patients"
          value: 12
          style:
            isAlignRight: false
            isValueBottom: true
            isValueHidden: false
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.firstname & ' ' & @ctx.current.item.lastname
          leftElement: 
            element: avatar
            text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
            uri: =@ctx.current.item.photo
﻿
﻿

Core structure
value	Positive or negative numeric value.
format	A selection of formats is available for the main value of the widget, for example, currency.
title	Display a title for the trend.
subtitle	Add a subtitle under the title text. Note: this text won't be displayed if isValueBottom is set to true
style	Properties used for component styling. - isValueBottom - By default, the value is on the right of the text. Set the property to true to move it underneath the text. - isValueHidden - hides the number and only shows an icon indicating an up or down trend. - isAlignRight - aligns everything to the right.

Updated 08 Aug 2024

Did this page help you?

titles

actions (buttons)

trend

﻿Configuration options﻿

Core structure

﻿Examples and code snippets ﻿

Trend on value widget

Trend on chart widget

Trend on list widget

Configuration options

Examples and code snippets