chart:gauge

Description

The chart gauge directive generates a gauge, you can also use the chart export and chart credit directives to add this functionality to your gauge.

Usage

as element:
<chart:gauge
       value="{number}"
       min="{number}"
       max="{number}"
       [stops="{array}"]
       [title="{string}"]
       value-suffix="{string}">
</chart:gauge>

Directive info

  • This directive creates new scope.

Parameters

Param Type Details
value number

Value to be displayed on the gauge.
min number

The smallest number that can be displayed on the gauge.
max number

The highest number that can be displayed on the gauge.
stops
(optional)
 array

The colours to render at each stop measured from 0 to 1. Default [ [0.1, '#DF5353'], // red [0.5, '#DDDF0D'], // yellow [0.9, '#55BF3B'] // green ]
title
(optional)
 string

The title of the chart.
value-suffix string

Suffix for the value on the gauge.

Example

Source