- Using the Library
- Using the Themes
- Using the Demo App
- Donut Chart
- Funnel Chart
- Linear Gauges
- Menu and MenuBar
- Radial Gauge
The RadialGauge component is a circular slider with tick mark support. The arc length is customizable.
Creating the RadialGauge Component
The RadialGauge extends the Flex SliderBase class, which means that it can be added to any container that implements IVisualElementContainer.
Using the RadialGauge Component
The most relevant property is "value", which is the currently set, bindable, value. The "angleStart" and "angleEnd" properties are used to define the arc length that the slider will sweep out.
Like other SliderBase components, use minimum and maximum to set the bounds of acceptable values.
If "showTicks" is true, then major and minor ticks will be displayed. Major ticks are ticks that can display a label next to them and minor ticks are ticks displayed between the major ticks.
If "showTicks" is true, there are a minimum of 2 major ticks.
Tick labels will by default display the numerical value of the major ticks they are next to. The precision of the number displayed is set via the "labelDefaultPrecision" property.
Use the "labelsFormatFunction" to display custom labels.
Use the "showTickLabels" property to not display major tick labels.
Set the "editable" property to false to simply display data and not allow user interaction. See the 3rd example of the RadialGauge demo for an example.
Animations & Effects
If the track is directly clicked, the thumb will animate to the new value. The duration of this animation can be set via the inherited "slideDuration" style.
Field can be tabbed to and interacted with via the keyboard and mouse wheel like other SliderBase subclasses.
Selected Custom Styles
See ASDocs for GaugeBase. Numerous custom styles.
Themes & Skinning
A skin for the Spark themes is provided.
See the RadialGauge demo application for example code.Back To Top