How To
Documentation
    Learn More

      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

      ParamTypeDetails
      valuenumber

      Value to be displayed on the gauge.

      minnumber

      The smallest number that can be displayed on the gauge.

      maxnumber

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

      Suffix for the value on the gauge.

      Example

      Source