Gauge Chart Properties Reference¶
This section describes chart properties that configure the contents, behavior, and appearance of the circular gauge and linear gauge type widget.
Design
BROKEN containerBackgroudColor
Specifies the color of the parent page element. Set this property to the color of the parent page element. Certain elements of the widget will use this color so that they coordinate with the page.
BROKEN customMinorTicks
BROKEN customTicks
geometry
Specifies the options required to set the geometry of a Circular Gauge widget. Specify the startAngle and endAngle options to customize the shape of the circular gauge’s arc.
endAngle
Specifies the end angle of the circular gauge’s arc.
startAngle
Specifies the start angle of the circular gauge’s arc.
margin
Specifies the blank space in pixels between the widget’s extreme elements and the boundaries of the area provided for the widget.
rangeContainer
Used only for Circular Gauge type widgets.
So that data can be visualized more easily, you can combine values into ranges and color each range differently. You can also specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.
backgroundColor
Specifies a range container’s line color to show behind ranges if their size differs from the scale’s size.
offset
Specifies the offset of the range container in pixels.
orientation
This property specifies the range container’s orientation.
palette
Sets the palette of colors to be used for coloring the gauge range container. Use this option to set a predefined or custom palette. If the number of the ranges is greater than the number of colors in the palette, palette colors are repeated, but slightly modified. You can override the color of an individual range by specifying a color option of this specific range iwith the range property.
BROKEN ranges
Adding a range creates an [object, object].
Ranges allow you to mark certain value ranges in the gauge. Visually, the ranges are displayed as bars along scales. Each range is denoted by a number under the ranges property. Specify a start value, an end value and a color for each range.
color
Specifies a color of a range.
endValue
Specifies an end value of a range.
startValue
Specifies a start value of a range.
width
Specifies the range container’s width in pixels.
scale
Specifies a gauge’s scale options. To divide a scale, set its startValue and endValue properties. The scale’s major and minor ticks will be calculated automatically, so that the tick labels do not overlap each other. Major ticks will be shown by default. To show minor ticks, select the visible property for minorTick. You can set custom major and minor tick intervals, show custom major and minor ticks, and format tick labels.
endValue
Specifies the end value for the scale of the gauge.
label
Specifies common options for scale labels. Scale labels represent textual values for major scale ticks.
customTextWidgetFunction
Specifies a function to use to display the labels.
font
Specifies font options for the text displayed in the scale labels of the gauge.
format
indentFromTick
Specifies the spacing between scale labels and ticks.
overlappingBehavior
Specifies the overlap resolving options to be applied to scale labels.
Available options: * hideFirstOrLast * useAutoArrangement
useRangeColors
Specifies whether or not scale labels should be colored similarly to their corresponding ranges in the range container. To paint all scale labels in a single color, use the color option of the font object.
visible
Specifies whether or not scale labels are visible on the gauge.
BROKEN minorTick
Specifies options of the gauge’s minor ticks. Minor ticks are calculated automatically based on the scale’s startValue and endValue property values. To make minor tick visible, select the visible property. In addition, you can set a custom minor tick interval or add custom minor ticks using the tickInterval and customTickValues properties respectively. You can also specify the length, width and color of the minor ticks using corresponding properties.
minorTickInterval
Specifies an interval between minor ticks. Minor ticks are the intermediate ticks between major ticks. They are required when the major ticks are arranged far from each other. If this property is not set, minor ticks are arranged automatically.
orientation
Specifies the orientation of scale ticks.
startValue
Specifies the start value for the scale of the gauge.
tick
Specifies options of the gauge’s major ticks. Major ticks are calculated automatically based on the scale’s startValue and endValue property values. They are visible by default. You can set a custom major tick interval or add custom major ticks using the tickInterval and customTickValues properties respectively. You can specify the length, width, visibility and color of the major ticks using the corresponding properties.
tickInterval
Specifies an interval between major ticks. Major ticks are the ticks that are accompanied by labels, which display the corresponding scale values. Use this property to divide the scale by major ticks in a specified interval one from another. If this property is not set, major ticks are automatically arranged so that labels do not overlap each other.
size
Specifies the size of the widget in pixels. The widget occupies the entire area of the parent container. If the container size (width or height) is set to zero, the widget is not displayed.
subtitle
Applies to linear gauge only.
BROKEN subvalue
BROKEN subvalueIndicator
The Circular Gauge widget can display one main value and several subvalues. The subvalue indicator is a pointer which designates an extra value on a scale.
backgroundColor
baseValue
Specifies the base value for the value indicator of the rangeBar type. By default, a range bar starts from the beginning of the gauge scale. If you need to draw the range bar starting from a specific scale value, assign the required value to the baseValue option. In this instance, the range bar will display the range from the baseValue to the main gauge value.
BROKEN title
Specifies a title for the gauge. You can also place details on the gauge below the title.
BROKEN theme
For linear gauge only. Specifies the name of the theme to be applied.
BROKEN tooltip
A tooltip is a small pop-up rectangle that displays information about a series point when you hover over them.
arrowLength
Specifies the length of the tooltips’ arrow, in pixels.
border
Specifies the appearance of the tooltip’s border.
color
Specifies a color for the chart’s tooltips.
enabled
Specifies whether or not tooltips are enabled in the chart.
format
Specifies a format for the text displayed in crosshair labels.
font
opacity
Specifies the opacity of tooltips.
paddingLeftRight
Specifies the blank space between a tooltip’s left/right boundaries and the inner text, in pixels.
paddingTopBottom
Specifies the blank space between a tooltip’s top/bottom boundaries and the inner text, in pixels.
shadow
Specifies options of the tooltip’s shadow.
blur
Specifies the blur of a tooltip’s shadow.
color
Color a tooltip’s shadow
offsetX
Indicates the horizontal offset of a tooltip’s shadow, in pixel.
offsetY
Indicates the vertical offset of a tooltip’s shadow, in pixel.
opacity
Specifies the opacity of a tooltip’s shadow. Accept a value between 0 and 1, where 0 is transparent and 1 is opaque.
BROKEN rtlEnabled
valueField
Specifies the main value on the gauge. Too specify other values, see the subvalues property.
valueIndicator
Specifies the appearance options of the value indicator.
The value indicator is a pointer which designates the main value of the gauge. There are several types of value indicators.
backgroundColor
Specifies the background color for the value indicator of the rangeBar type.
baseValue
Specifies the base value for the indicator of the rangeBar type.
color
Specifies the color of the indicator.
indentFromCenter
Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.
offset
Specifies the distance between the indicator and the invisible scale line.
secondColor
Specifies the length of a twoNeedleColor type indicator tip as a percentage.
secondFraction
Specifies the length of a twoNeedleColor type indicator tip as a percentage.
spindleGapSize
Specifies the inner diameter in pixels, so that the spindle has the shape of a ring.
spindleSize
Specifies the spindle’s diameter in pixels for the indicator of a needle-like type.
size
Specifies the range bar size for an indicator of the rangeBar type.
text
Specifies the appearance of the text displayed in an indicator of the rangeBar type.
font
Specifies font options for the text displayed in the legend.
format
Formats a value before it is displayed.
type
Specifies the type of value indicator. The options available for a Circular Gauge differ from those available for a Linear Gauge.
Accepted Values for Linear Gauge:
rectangle
circle
rhombus
rangeBar
Accepted Values for Circular Gauge:
rectangleNeedle
triangleNeedle
twoColorNeedle
rangeBar
triangleMarker
textCloud
width
Specifies, in pixels, the width for a value indicator of a needle-like type.
BROKEN values
Specifies the main value on a gauge. The main value is designated by the value indicator. You can obtain and change the gauge value at runtime.
width
Specifies the width of an indicator in pixels.
Default Value: 2
verticalOrientation
Specifies the orientation of a rangeBar indicator.
Default Value: ‘bottom’
Behavior
animation
Has options that let you specify how the gauge indicator is animated.
duration
Determines how long the animation runs in miliseconds.
enabled
Whether animation is enabled.
easing
Specifies the type of animation easing.
Available options:
easeOutCubic
linear
export
Configures the exporting and printing features. These features allow a user to export your widget into a document and print it. When exporting is enabled, the ‘export’ button appears in the widget. A click on it invokes a drop-down menu containing a list of available formats for exporting into.
Available properties:
backgroundColor
enabled
fileName
formats
printingEnabled
loadingIndicator
Specifies the appearance of the loading indicator. Usually, the widget is quick enough to draw itself instantly for a viewer. There are, however, cases, when the widget takes longer to be drawn. In such cases, displaying the loading indicator is recommended. To display the loading indicator, select the ‘show’ option.
backgroundColor
Specifies a color for the loading indicator background.
font
Specifies font options for the loading indicator.
text
Specifies a text to be displayed by the loading indicator.
show
Specifies whether to show the loading indicator or not.
redrawOnResize
Specifies whether to redraw the widget when the size of the browser window changes or a mobile device rotates.