Grouped 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
• Title
• {%Date} token in title
• Font and HTML Formatting
• Background

Overview

AnyChart Stock Tooltips is 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 cover almost all text related options of Grouped Tooltips.

Text Configuration and Formatting

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

Basic XML Syntax to define what data should be shown in tooltip looks like that:

Tokens

To show values of series and technical indicator points you can use special tokens that are replaced by actual values when chart is shown. There are a lot of tokens in AnyChart Stock and you can use them with static text or alone.

Illustration below shows the tooltip and highlights sample tokens used to create it:

Tokens Properties

Tokens Properties return certain value associated with the token. Some of the tokens are values themselves, but most of them - not. Table below list all tokens and their properties:

Token Group	Available Properties
{%SeriesName} {%SeriesIcon}	There are no properties for these tokens.
{%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 by the icon that illustrates whether value grows or decreases, but as any numeric tokens it should know what point should be analyzed. Use of this token is described in details in Using Falling/Rising Icons.

** - {%CustomField} denotes any custom field that can be defined in data provider used by series. If you need some additional information do be shown in tooltip - you can use custom fields to store them and custom tokens to display them. This option is described in details in Using Custom Fields of Data-Provider.

*** - "%ChangeColor" token is used when you color text using HTML formatting. Using this token you can color the part of the text in Green (growth) or Red (decrease) to show the change direction. And should define what value should be used. Small sample:

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

You can see that %ChangeColor token is used in color attribute in <font> HTML tag. More detailed description can be found in Using Color Tokens.

Table below lists all available properties:

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.

Illustration below shows what properties mean basing on the sample of {%Value} token for Line series. You can see the chart in the state when user zoomed to some range and all series data is not shown on the screen. 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 the tooltip using properties:

Illustration shows the properties of {%Value} token, but the model is applicable for all other tokens with the sample properties.

Live sample below shows usage of all properties of {%Value} token in grouped tooltip for two series.

Tokens formatting

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

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

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

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

This works for any tokens in different elements in AnyChart Stock. Learn more in Numbers Formatting article.

2. Date time token {%Date}. You can add date into the tooltip using {%Date} token.

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

This formatting options are applicable to all date time tokens in AnyChart Stock. Learn 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 tooltip, and another uses formatting using scale parameter:

Live sample allows you to compare the result in one grouped tooltip:

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

Font Settings and HTML tags

<font> node is used to configure font in any text elements in AnyChart Stock.

There are two options for font configuration:

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

Single Font

By default tooltip uses complex HTML formatting from defaults, but you can turn this formatting off and use uniform font for the item.

Sample XML to use uniform font:

As you can see you need to disable HTML mode using render_as_html attribute in <font> node and define font settings.

Live sample of setting different uniform font for different series in one grouped tooltip:

As you can see from the sample different series can be now distinguished easier, but all text for one series is colored in one color and uses one font. HTML mode provides more options, but but its configuration is more complex.

HTML Tags

By default all tooltips use HTML formatting. Depending on the type of series default is different.

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

HTML tags should be specified using CDATA section. Sample XML with bold HTML tag <b>:

XML syntax below shows sample HTML formatting. It uses coloring, series icon, and value. Each token is colored using <font> tag:

Settings may look complex, but they allow to achieve great results:

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

Flash Player doesn't support all HTML tags. Full list of supported tags can be found in Font Configuration article.

Using Data Provider Custom Fields

In Required and Custom Fields section of Data Provider Configuration article you can find the description how to add custom fields into the data provider. One of the places of application of this feature is tooltip text.

You can add custom fields values into the tooltip to provide additional information. XML for this may look like:

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

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

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

Live sample below shows several custom fields in tooltip:

Another example of the similar situation: you show the line chart that visualizes closing price, but may also want to show open, high, low, close and volume in tooltip. You can either define custom name or use standard (reserved) names.

Following live sample shows how to 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 two data providers with text fields:

To use these fields you just refer to them by name and provide formatting options if needed, here is a live sample of a chart with data providers configured as shown above and text fields used in grouped tooltip:

Series Custom Attributes

Each series can have several custom attributes that contain additional information about the series. These attributes can be used in tooltip.

Syntax of series attributes definition:

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

Live sample below shows series with ShortName and LongName attributes. These attributes are used in tooltip:

Technical Indicators Differences

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

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

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

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

Sample XML of indicator with tooltip formatting strings defined:

Live sample where tooltips are disabled for Slow Stochastic and configured for Fast Stochastic:

Learn more about technical indicators settings in Technical Indicator Settings.

Series Icon

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

Sample XML syntax of icon configuration:

As you can see:

Icon color is set using %Color token. This token value comes from series color attribute. You can use color transform options described in Color article or static color like <fill color="#55DD00"/>.

size attribute defines icon width and height in pixels.

Shape is set using 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

Live sample of the tooltips with different icons in different series:

Color Tokens

As it was said above HTML formatting is used in tooltip text configuration. To color part of the text <font> tag is used. For example: <font color="#FF0000">{%Value.Current}</font>.

You can either use constant color or color tokens.

There are two color tokens that can be used:

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

XML to use {%Color} token. In this sample text is colored to the series color:

XML to use {%ChangeColor} token. In this sample text us either Green or Red - depending on the value:

Live sample below shows how {%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 are added into the tooltip using {%ChangeIcon} token.

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

XML to add these icons into the tooltip text:

Visual appearance of icons can be configured, you can change size, fill and border.

XML for that looks like that:

Live sample below shows icons configuration:

Title

Grouped tooltip puts data from several series and/or indicators from one or several charts in one block and each series or indicator provides information about the data in it. To make this composite block of data more clear grouped tooltip has a title, which can be configured on <settings> and <chart> levels:

You can put any text in this title, which describes your data better. By default grouped tooltip title displays current data.

{%Date} token in title

If you don't like default title text or want to combine it with some text you can use {%Date} token along with some static text or formatting options:

Date formatting is done as with any other dates, see Date Time Formatting for more.

Font and HTML Formatting

As any other text you can format title using plain text settings - using uniform font and font decoration:

Or create complex HTML formatted form to color parts of the title in different colors or give them different decoration:

To learn more about text and HTML formatting see: Font Formatting Options.

Background

Title has its own background and combination of text decoration, title background and tooltip background allows you to create a great looking tooltip. For example, settings like these:

Allow you to display nice looking tooltip as shown in this Live Sample, which also shows HTML formatting and use of Date token: