Separated Tooltips Text Configuration

• Overview
• Text Configuration and Formatting
• Tokens
• Token Properties
• Token Parameters and Formatting
• Font and HTML Formatting
• Data Provider Custom Fields
• Series Custom Attributes
• Technical Indicator Special Features
• Series Icon
• Color Tokens
• Falling/Rising Icons

Overview

AnyChart Stock Tooltips is a very powerful way to show information in tooltips; they can show HTML-formatted text, series icons, and can be displayed in various ways. This article covers almost all the text-related options of Separated tooltips.

Text Configuration and Formatting

The formatting string is very important, as it defines what information is to be shown in the tooltips for one or the other series or indicator. AnyChart Stock provides a very versatile way to configure this string, including HTML, special tokens and formatting options.

Here is a basic XML syntax for defining what data is to be shown in a tooltip:

Tokens

To show values of a series and points of a technical indicator, you can use special tokens; they are replaced with the actual values when the chart is shown. AnyChart Stock has a lot of tokens, and you can use them with static text or alone.

The illustration below demonstrates a tooltip and shows the sample tokens used for creating it:

Token Properties

Token Properties return certain values associated with the token. Some of the tokens are the values themselves, but most of them are not. The table below lists all the tokens and their properties:

Token Group	Available Properties
{%SeriesName} {%SeriesIcon}	These tokens do not have any properties .
{%Value} {%ValueChange} {%PercentValueChange} {%Open} {%High} {%Low} {%Close} {%Volume} {%ChangeIcon} * {%CustomField} ** "%ChangeColor" ***	First Last FirstVisible LastVisible Min Max MinVisible MaxVisible Current
{%Date}	First Last FirstVisible LastVisible Current

* - {%ChangeIcon} is replaced with the icon that illustrates whether the value is rising or declining, and like any numeric token this one must "know" what point is to be analyzed. The use of this token is described in detail in Using Falling/Rising Icons.

** - {%CustomField} denotes any custom field that can be defined in the data provider used by the series. If you need some additional information to be shown in a tooltip, you can use custom fields for storing it and custom tokens for displaying it. This option is covered in detail in Using Custom Fields of Data-Provider.

*** - "%ChangeColor" is used when you color a text using HTML formatting. With this token you can color a part of the text in Green (rise) or Red (decline) to show the change direction, and are to define the value to be used. Here is a quick example:

<format><![CDATA[Change: <font color="%ChangeColor.Current"></font>]]></format>

As you can see here, the %ChangeColor token is used in the color attribute of the <font> HTML tag. A more detailed description on this can be found in Using Color Tokens.

The table below lists all the available properties and their descriptions:

Property Name	Description
First	Value of the field from the first point in a series.
Last	Value of the field from the last point in a series.
FirstVisible	Value of the field from the first visible point in a series.
LastVisible	Value of the field from the last visible point in a series.
Min	Minimal value of the field in a series.
Max	Maximal value of the field in a series.
MinVisible	Minimal value of the field in the visible range of a series.
MaxVisible	Maximal value of the field in the visible range of a series.
Current	Value of the field from the point with the hovered date. If series doesn't have a point with the hovered date property returns empty string.

The illustration below explains the meaning of properties by the example of the {%Value} token used with the Line series. Here you can see a chart in the state when user zoomed to a certain range, and all the series data is not shown on the screen. The blue regions on the left and on the right are imaginable - user can't see the first and the last point, but these values can be shown in a tooltip by using properties:

The i illustration shows the properties of {%Value} token, but this model is applicable to all other tokens with the sample properties.

The live sample below shows the use of all the {%Value} token properties in a tooltip for one series.

Token Formatting

All the tokens that return date, time or numerical values can be formatted.

1. Numerical tokens. All the tokens below return numerical values:

• {%Value}
• {%ValueChange}
• {%PercentValueChange}
• {%Open}
• {%High}
• {%Low}
• {%Close}
• {%Volume}
• {%CustomField}

You can define how the numbers returned by these tokens are to be displayed: what is used for the decimal or thousands separator, etc. If, for example, you want to show {%Value.Current} with a plus ("+") sign when value is positive - you should write it as {%Value.Current}{plusSign:true}

This works for any tokens in different elements of AnyChart Stock. Find out more in Numbers Formatting.

2. Date-time token {%Date}. You can add date to a tooltip by using the {%Date} token.

The date token can be formatted too: {%Date}{"%yyyy-%MM-%dd %hh:%mm %tt"}.

These formatting options are applicable to all the date time tokens in AnyChart Stock. Find out more in Date/Time Formatting.

Here is a live sample with two Volume+MA technical indicators; the first one doesn't use any formatting in the tooltip, while the other uses the formatting with the scale parameter:

The live sample allows comparing the two charts:

As you can see here, scaling improves the look of the tooltips and axis labels tremendously and makes it easier to read them.

Font Settings and HTML Tags

The <font> node is used for configuring the font for any text elements in AnyChart Stock.

There are two font configuration options:

• Set single font for the entire text
• Use HTML tags to define complex formatting

Single Font

By default, a tooltip uses complex HTML formatting defined the defaults. However, you can disable that formatting and set a standard font for the item.

Here us a sample XML for setting a standard font:

As you can see here, you need to disable the HTML mode with the render_as_html attribute in the <font> node and then define the font settings.

Here is a live sample demonstrating the new settings in action:

As you can see from the sample, the "IBM" string has turned black, like all the other text. Different coloring is available only in the HTML mode, which is more complex although provides more sophisticated formatting options.

HTML Tags

By default all tooltips use HTML formatting. The default settings vary depending on the series type.

With HTML formatting, you have more flexibility. HTML gives you the ability to use the %SeriesColor and %ChangeColor tokens, which color parts of the text depending on the value.

HTML tags should be specified in the CDATA section. Here is a sample XML with the <b> (bold) HTML tag:

The XML syntax below demonstrates a sample HTML formatting. It uses coloring, series icon, and value. Each token is colored with the <font> tag:

The settings only look complex, but they allow achieving really great results:

This sample uses static texts and color tokens that change the color of the text depending on the values. Find out more about this in the Color Tokens section.

Flash Player doesn't support all the HTML tags. The full list of the supported tags can be found in Font Configuration.

Using Data Provider Custom Fields

In the Required and Custom Fields section of the Data Provider Configuration article, you can find the instructions for adding custom fields to data provider. One of the places where this feature can be applied is tooltip text.

You can add custom field values to a tooltip to provide additional information. The XML for that may look like this one:

As you can see here, there there are the standard value fields and the three fields named: ExtraValue1, ExtraValue2 and ExtraValue3, which come from the data set.

The XML syntax below shows how to use the fields obtained from the data provider:

When adding a custom field value, you should use the {%CustomFieldName} token, where CustomFieldName is the name in the data provider; for example:<format>{%ExtraValue1}</format>.

The live sample below shows several custom fields in a tooltip:

Another example of a similar situation: you show a line chart that visualizes the close price; however, you may also want to show the open, high, low, close prices and the volume amount in the tooltip. In order to do that, you can either define a custom name or use the standard (reserved) names.

The following live sample shows how you can do that:

If you need text or additional date time fields you can use "Text" and "DateTime" custom fields as described in Data Provider Configuration: Text Fields and Data Provider Configuration: DateTime Fields. Sample XML Snippet below shows a data provider with two text fields and one additional DateTime field:

To use these fields you just refer to them by name and provide formatting options if needed:

And here is a live sample of a chart with data provider and tooltips configured as shown above:

Series Custom Attributes

Each series can have several custom attributes, containing additional information on the series. These attributes can be used in the tooltip.

Here is the syntax for defining series attributes:

As you can see from the listing, the tooltip uses custom attributes. To place the attribute value on the tooltip, use the {%SomeAttributeName} tokens, where SomeAttributeName is the name specified in: <attr name="AttrName"/>.

The live sample below shows a series with the ShortName and LongName attributes. These attributes are used in the tooltip:

Technical Indicators Differences

Technical indicators use the visualization options that are pretty similar to those of series. Different technical indicators are represented by the parameters that are displayed on the chart. For example, Volume+MA shows: Volume and Moving Average as Bar and Line series.

All the visualization settings of a technical indicator are identical to those of a series and so the tooltip settings are similar too.

For example, Stochastic Oscillator. This indicator visualizes the K-Period and the D-Period. There is a special section for them both in the XML. The XML below shows the settings for the K-Period and the D-Period:

As you can see here, the settings are similar to the settings of the series, and you can configure <tooltip_settings> for each parameter.

Here is a sample XML for an indicator with tooltip formatting strings defined:

Here is a live sample where the tooltips are disabled for all the indicator series in one chart and configured for the other:

Find out more about technical indicator settings in Technical Indicator Settings.

Series Icon

When you use the {%SeriesIcon} token in the tooltip formatting string, it is replaced with an icon. By default, the icon is a square of 8x8 pixels. You can configure an icon for each series: shape, size, fill and border.

Here is a sample XML syntax for configuring an icon:

As you can see here:

The icon color is set with the %Color token. The value of this token comes from the color attribute of the series. You can use the color transform options described in the Color article or use a static color like <fill color="#55DD00"/>.

The size attribute defines the icon width and height in pixels.

The shape is defined with the type attribute. By default, it is set to "Square", but you can use any of the shapes listed below:

	Type
	Circle
	Square
	Diamond
	Cross
	DiagonalCross
	HLine
	VLine
	Star4
	Star5
	Star6
	Star7
	TriangleUp
	TriangleDown

Here is a live sample of the tooltips with different icons in different series:

Color Tokens

As it has been said, tooltip text can be configured using HTML formatting. To set up the color, we use the color part of the text <font> tag. For example: <font color="#FF0000">{%Value.Current}</font>.

You can use either a constant color or color tokens.

There are two color tokens you can take advantage of:

• {%Color} - color of the series set in the color attribute: <series color="Red">
• {%ChangeColor} - color of the positive or negative change.

Here is an XML sample demonstrating the use of the {%Color} token. In this sample, the text is colored to the series color:

Here is an XML sample demonstrating the use of the {%ChangeColor} token. In this sample, the text is either Green or Red - depending on the value:

The live sample below demonstrates how the {%Color} and {%ChangeColor} tokens can be used:

Falling/Rising Icons

Besides coloring the changes, you can show them as icons: red arrow down or green arrow up. These icons can be added to the tooltip with the {%ChangeIcon} token.

{%ChangeIcon} has Current, First, Last, FirstVisible and LastVisible properties that define which value change is to be shown, and you should always specify the property when using this token. As a matter of fact {%ChangeIcon} is similar to {%ValueChange} and {%PercentValueChange}, except that it shows only the trend.

Here is an XML sample for adding these icons to the tooltip text:

The visual appearance of the icons can be configured too; you can customize the size, fill and border.

Here is an XML sample for that:

The live sample below demonstrates configuring icons: