Horizontal Gauge Pointers

• Overview
• Types of Pointers
• Bar Pointer
• Marker Pointer
• Tank Pointer
• Thermometer Pointer
• Range Bar Pointer
• Binding pointers to axes
• Label
• Tooltip

Overview

Pointers on Gauges are special signs for showing your gauges' values. You can even create pointers that will be updated dynamically - manually or programmatically. See Interactive gauges for more. Pointers are a large separate object and have lots of nodes that determine their visual appearance and behavior on the gauge. For example you can totally change the look of pointers, assign attributes or actions to them, bind them to a certain axis and so on. Almost always pointers are a' must-have" element on your gauge.

Types of pointers

In AnyChart Horizontal Gauges we have 5 types of pointers: Bar Pointer, Marker Pointer, Tank Pointer, Thermometer Pointer, Range Bar Pointer. Here are descriptions for all of them:

Bar Pointer

Bar pointer is a line of certain width that goes from the beginning of your axis to the value specified by value attribute. You can specify its position and fill/hatch fill. That's an example of using bar pointers: we have some of them, of different color and position:

Marker Pointer

Marker pointer uses a figure of certain shape for pointing your axis current values. As well as in case of bar pointer you can use several markers on your gauge:

Tank Pointer

Tank Pointer imitates a barrel filled with some liquid. This type of gauge is very attractive and simply-adjusted, as it has almost the same attributes as Bar Pointer

Thermometer Pointer

Thermometer pointer, as you can understand it from its name, indicates a mercurial thermometer. In addition to the width of your thermometer bar you can configure your thermometer's bulb properties.

Range Bar Pointer

Range Bar Pointer differs from the regular Bar Pointer with one thing: you can set not a single value for your pointer, but both start value and end value.

Binding pointers to axes

You can bind a certain pointer or pointers to any axis you want (of course at first you need to define this axes in extra_axes node). To do it just specify the axis attribute of your pointer. If the axis attribute is not specified the pointer is bound to primary axis. In this example marker pointer is bound to primary axis($) and bar pointer is inverted and bound to additional axis(%):

Label Pointer

You can add a label to any pointer you want to show your scale value. Label acts as a part of pointer, or you can easily move pointer with it, when pointer is editable. Typical XML for label looks like this:

The position subnode attributes have the following values:

<position>
Attribute	Values	Default	Description
placement_mode	ByPoint | ByRectangle | ByAnchor	Center	Defines the label pointer placement method.
halign	Left | Center | Right	Center	Sets horizontal label pointer align.
valign	Top | Center | Bottom	Center	Sets vertical label pointer align.
padding	Number		Sets the padding for label pointer in percents.
x	Number		Sets the "x" coordinate of your label pointer in percents.
y	Number		Sets the "y" coordinate of your label pointer in percents.
width	Number	Auto	Sets the width of your label pointer.
height	Number	Auto	Sets the height of your label pointer.
spread	Boolean	False	Sets whether label pointer background is spread to the label pointer container.
anchor	LeftTop | CenterTop | RightTop | CenterLeft | Center | CenterRight | LeftBottom | CenterBottom | RightBottom	CenterTop	Sets the anchor point for label pointer.

Almost all attributes are the same as for Extra labels. Look for the explanation there. The only difference is an "anchor" function. position node has a "ByAnchor" value of placement_mode attribute. If it is "ByAnchor" the label is always positioned at one side of the pointer. The possible anchor values are listed in description of anchor attribute above.

Let's look at the example. We take thermometer pointer and add label for it. We want to display the value of our thermometer inside the thermometer bar. So placement_mode should be set to "ByAnchor" and anchor - to "CenterBottom". We also set a little padding, disable background for the label and make the font white. XML is as follows:

That's what we get:

Tooltip

You can add a tooltip to any pointer you want to show value or some other data. Typical XML for tooltip looks like this:

You can disable tooltip, if you don't need it: