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. |