Gauge Style Idea

• Overview
• Style Idea and Demonstration
• Create a Gauge
• Configure an Element
• Define reusable settings and put them in Style
• Apply a Style
• Override a Style
• Styles Inheritance
• Overriding AnyChart Defaults
• Common styles
• Linear pointers styles
• Circular pointers styles

Overview

While configuring your elements' visual appearance you may have encountered a problem of adjusting your elements' options, especially when these options are common for a whole group of elements. For this case we have a styles node, in which you can describe the style of your color ranges, tooltips, labels, pointers, i.e. fully configure the view of your gauge.

Style Idea and Demonstration

Style is a named set of configuration nodes for some element, each style holds all unique settings for the element, typically style consists of a main part and so-called states.

Each style should have a unique name among the styles of the same type, you can create <bar_pointer_style name="Style1"/> and <marker_pointer_style name="Style1"/> at the same time.

Main part holds all default settings for the element, and states define how element looks like when it is hovered, pushed selected and so on. The number of states supported may differ from style to style.

Most convenient way of using style is to define the settings that wouldn't change (like a marker shape, for example, or line thickness) and create a named style in <styles/> node.

Later, when you create an element you specify the style attribute and set its value to style name.

Let's go through the creation of a simple circular gauge with the several pointers of a Needle type to understand how everything works.

Create a Gauge

At first we just create a circular gauge and some pointers without configuring them. We create a simple 360 degrees circular gauge, set a scale bar for it and enable labels. We also disable both minor and major tickmarks. All these settings we describe in axis node:

Now we need to create some pointers that will have different default values but no other pre-set options. We do this by creating a pointers node. Now we need pointers themselves. Let's say we need to have 3 pointers of needle type. So, we need 3 corresponding nodes. With only two attributes: type and value:

And that's the result of our work:

Note that we although we haven't set color and size for our pointers AnyChart has calculated it automatically.

Configure an Element

Now let's configure one of the elements: let it be the first needle pointer. We will change its color, length and color on hovering. To configure a style of a certain pointer you need to create a subnode needle_pointer_style inside pointer node. There we change radius attribute to 120:

And now let's get to states. We create the corresponding subnode in needle_pointer_style node and define that our pointer should have yellow color in normal mode and green color when we hover on it. So the XML for pointers now is as follows:

We may see the results of our actions at once:

Define reusable settings and put them in Style

But what's if we want to set some similar settings to a whole group of elements? Should we define attributes for each of them? Of course no! For these purpose we may use styles, and then apply a configured style to any element you want. Let's imagine that we want to apply settings of our first needle pointer from the previous example to another pointers. So, we create a styles node and then place needle_pointer_style and its attributes there:

Apply a Style

Now when we have created our style let's apply it to all pointers. In every pointer node we create style attribute and enter our style's name there:

As we have applied style to all pointers we have no need to describe the behavior of our first needle pointer inside pointer node. Here is the result:

Override a Style

It is good when we have lots of object of the same properties, but sometimes we need to make some changes to a certain one. Let's imagine we need to make the third pointer shorter. So we create needle_pointer_style in our pointer node and set radius attribute to 50. But we already have defined radius in our styles node. What happens then? The value of 50 replaces the previous one. That is called "Style Overriding".

Styles Inheritance

Whenever you create a style you may want to create it basing on another style - to do this just specify parent attribute and set its value to the name of the style you want to inherit. Sample XML:

If you use XML above - all pointers with style="ChildStyle" will have Red fill as well as all styles with style="MainStyle".

Overriding AnyChart Defaults

Each element in AnyChart has internal default style named "AnyChart_Default". When you create an element - it is created according to this style settings. When you create a style it has parent="AnyChart_Default" and it inherits all default settings.

You can override this default and create your own preset - just create a style with a same name (for example: <bar_pointer_style name="AnyChart_Default"/>) - it will be empty and you can (and have to) create own preset from the scratch. Please use this option only if you clearly understand styles and need to override presets, because you may need to define a lot of attributed and nodes to achieve good result.

Common styles

There are 3 styles that can be used both in circular and linear gauges:

• Label style
• Tooltip style
• Color Range style

Linear pointers styles

For Linear Gauge pointers we have 5 types of pointers and each has own style:

• Bar Pointer style
• Marker Pointer style
• Tank Pointer style
• Thermometer Pointer style
• Range Bar Pointer style

Circular pointers styles

For Circular Gauge pointers we have 5 types of pointers and each has own style:

• Bar Pointer style
• Marker Pointer style
• Needle Pointer style
• Knob Pointer style
• Range Bar Pointer style