Angular Gauge > Using STYLEs

The angular gauge can effectively use STYLEs feature to apply animation, effects and font styling to each and every object on the chart.

 
An example
Shown below is a simple example where we've applied font style to limit and value texboxes and shadow style to tick values:

<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%' tickValueDistance='20' showValue='1'>
   <colorRange>
      <color minValue='0' maxValue='75' code='FF654F'/>
      <color minValue='75' maxValue='90' code='F6BD0F'/>
      <color minValue='90' maxValue='100' code='8BBA00'/>
   </colorRange>
   <dials>
      <dial value='92' rearExtension='10'/>
   </dials>
   <styles>
      <definition>
         <style type='font' name='myValueFont' bgColor='F1f1f1' borderColor='999999' />
         <style type='font' name='limitsFont' bold='1' bgColor='F1f1f1' borderColor='999999' />
         <style type='shadow' name='myShadow' />
      </definition>
      <application>
         <apply toObject='Value' styles='myValueFont' />
         <apply toObject='Limitvalues' styles='limitsFont' />
         <apply toObject='tickvalues' styles='myShadow' />
      </application>
   </styles>
</chart>
This results in:
This was just a basic example. You can create complex animation patterns or apply effects to all chart objects as per your wish.
 
Chart Objects
You can apply effects, font styles and animation to the following objects in angular gauge:
Object Name Description STYLES supported Animation Parameters
BACKGROUND Background refers to the background for entire chart.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
  • _xScale
  • _yScale
DIAL All the dials on the gauge.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
  • _xScale
  • _yScale
  • _rotation
GAUGE The color range (qualitative range) for the chart.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
  • _xScale
  • _yScale
  • _rotation
PIVOT The base circle from which dial emanates.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
  • _xScale
  • _yScale
VALUE Value textfield for the dial (if visible).
  • Animation
  • Font
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
TICKMARKS Tick marks on the gauge scale.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
TICKVALUES Value for tick marks.
  • Animation
  • Font
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
LIMITVALUES Textfield representing chart lower and upper limit.
  • Animation
  • Font
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
TRENDPOINTS All defined trend points for the chart.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
TRENDVALUES Value of defined trend lines.
  • Animation
  • Font
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
TRENDMARKERS Trend-markers, if any.
  • Animation
  • Shadow
  • Glow
  • Bevel
  • Blur
  • _alpha
  • _x
  • _y
  • _xScale
  • _yScale
TOOLTIP Tool tip for the chart.
  • Font