trend

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

• list

• value

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)

widgets:
  trend-value:
    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-value (dynamic)

grid-item

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)

widgets:
  trendStatic-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

trend-chart (dynamic)

grid-item

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)

widgets:
  trendList-2x2:
    type: widget.list
    options:
      data: [email protected]
      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]
          leftElement: 
            element: avatar
            text: NA
            uri: [email protected]

trend-list (dynamic)

grid-item