Grouped Tooltips

Overview

Unlike Separated - Grouped tooltip is the type that shows one tooltip for all the series shown on the chart instead of showing an individual tooltip for each series. Its configuration is in many ways similar to the one of Separated tooltip, but there is a lot of special options and grouping modes.

This article describes all the available Grouping modes and explains how to configure them.

to top

Enable/Disable

To enable/disable tooltips you need to use the enabled attribute of <tooltip_settings> node. You can enable/disable tooltips for all charts, some of the charts, some of the series types or some of the series, as it is described in the Tooltip Settings section.

Here is a sample XML for enabling tooltip on all charts:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings enabled="true" />
05   </settings>
06 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      enabled: true
05    }
06  }
07}

To use Grouped tooltips, you need to set the tooltip_mode attribute to "Grouped":

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings enabled="true" tooltip_mode="Grouped" />
05   </settings>
06 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      enabled: true,
05      tooltipMode: "Grouped"
06    }
07  }
08}

to top

Display Modes

There are three ways to show a grouped tooltip:

Below you can find the description for each mode along with the explanation how to enable it.

Global: All series and Indicators in One Tooltip

The Global mode with all the series and indicators on all the charts may look like what is shown on the illustration below. As you can see here, there are three charts: one that displays price data and SMA(50) and two charts below it showing respectively Williams %R and Volume+MA. Showing separate tooltips for each of the lines could be misleading and make the chart more difficult to read. A grouped tooltip allows showing the relevant data all in one place.

To use such tooltip, you need to set the use_global_tooltip attribute of the <tooltip_settings> node to "true". Note that this attribute exists only in the <tooltip_settings> subnode of the <settings> node, for it is a global option.

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings enabled="true" tooltip_mode="Grouped" use_global_tooltip="true" />
05   </settings>
06 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      enabled: true,
05      tooltipMode: "Grouped",
06      useGlobalTooltip: true
07    }
08  }
09}

The live sample below demonstrates a chart with a Grouped Tooltip in the Global mode:

Live Sample:  Grouped Tooltip - Global Mode

to top

Local: Each Chart Displays Own Group

When each chart in a set shows a group of series logically linked to each other, but putting that data along with all the data of the other charts would create a too large and unreadable tooltip - you can display each group separately:

To do so, you need to set the use_global_tooltip attribute to "false":

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings enabled="true" tooltip_mode="Grouped" use_global_tooltip="false" />
05   </settings>
06 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      enabled: true,
05      tooltipMode: "Grouped",
06      useGlobalTooltip: false
07    }
08  }
09}

The live sample below shows two charts, each displaying its own grouped tooltip:

Live Sample:  Grouped Tooltip - Local Mode

to top

Local: Only One Active Chart Displays a Group

Grouped tooltips can be rather large, and showing them all simultaneously, as it has been shown in the previous section, could be unacceptable. In this case, you can switch to the mode where only one chart would shows a tooltip - the chart being under the mouse pointer at the moment:

To show a tooltip for the current chart only, you need to set the display_mode attribute to "CurrentChart":

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings enabled="true" tooltip_mode="Grouped" display_mode="CurrentChart" />
05   </settings>
06 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      enabled: true,
05      tooltipMode: "Grouped",
06      displayMode: "CurrentChart"
07    }
08  }
09}

Here is a live sample that demonstrates a Grouped tooltip shown only for the chart under the mouse pointer:

Live Sample:  Grouped Tooltip - Active Chart

to top

Tooltip Settings

Grouped tooltips are always configured in the <grouped_tooltip> subnode of the <tooltip_settings> node. This node has a lot of configuration options, which are described in detail in Grouped Tutorials.

The main thing we want to highlight in this section is that a tooltip can be configured in several places and, depending on the task, you can choose any of them.

Please note that not all the <grouped_tooltip> nodes are similar; this happens because of the complex structure of a Grouped tooltip. When you configure a tooltip in a series or for a series of some type - you can only control the tooltip text and its properties, but not its background or title.

Individual Settings for Each Series

You can configure the tooltip options for a given series in the series list; for example, to change the format of the text for a selected series, you would need to use the following XML:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <series_list>
07           <series type="Spline" data_provider="dp1" color="Red">
08             <name><![CDATA[MSFT]]></name>
09             <tooltip_settings>
10               <grouped_tooltip>
11                 <labels>
12                   <format><![CDATA[Custom Text ({%Value}{numDecimals:2})]]></format>
13                 </labels>
14               </grouped_tooltip>
15             </tooltip_settings>
16           </series>
17         </series_list>
18       </chart>
19     </charts>
20   </settings>
21 </stock>
01{
02  settings: {
03    charts: [
04      {
05        seriesList: [
06          {
07            type: "Spline",
08            dataProvider: "dp1",
09            color: "Red",
10            name: "MSFT",
11            tooltipSettings: {
12              groupedTooltip: {
13                labels: {
14                  format: "Custom Text ({%Value}{numDecimals:2})"
15                }
16              }
17            }
18          }
19        ]
20      }
21    ]
22  }
23}

In the sample below, the two series have an individual format defined for each of them, and the third series has no tooltip at all, as tooltips are disabled for that series:

Live Sample:  Grouped Tooltip - Individual Series Settings

to top

Defaults for Series Types

When you use several types of series on one chart, it may happen that the series of a given type have typical tooltip settings; in this case, you can define the defaults for this series type. To do that, you need, for example, to make the following settings:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <series_settings_defaults>
07           <area_series>
08             <tooltip_settings enabled="true">
09               <grouped_tooltip>
10                 <labels>
11                   <font color="Black" />
12                   <format><![CDATA[Area: {%SeriesIcon} {%Name} {%Value}]]></format>
13                 </labels>
14               </grouped_tooltip>
15             </tooltip_settings>
16           </area_series>
17           <line_series>
18             <tooltip_settings enabled="true">
19               <grouped_tooltip>
20                 <labels>
21                   <font color="Red" />
22                   <format><![CDATA[Line: {%SeriesIcon} {%Name} {%Value}]]></format>
23                 </labels>
24               </grouped_tooltip>
25             </tooltip_settings>
26           </line_series>
27         </series_settings_defaults>
28       </chart>
29     </charts>
30   </settings>
31 </stock>
01{
02  settings: {
03    charts: [
04      {
05        seriesSettingsDefaults: {
06          areaSeries: {
07            tooltipSettings: {
08              enabled: true,
09              groupedTooltip: {
10                labels: {
11                  font: {
12                    color: "Black"
13                  },
14                  format: "Area: {%SeriesIcon} {%Name} {%Value}"
15                }
16              }
17            }
18          },
19          lineSeries: {
20            tooltipSettings: {
21              enabled: true,
22              groupedTooltip: {
23                labels: {
24                  font: {
25                    color: "Red"
26                  },
27                  format: "Line: {%SeriesIcon} {%Name} {%Value}"
28                }
29              }
30            }
31          }
32        }
33      }
34    ]
35  }
36}

As you can see here, these settings define that the separated tooltips for the area series and line series should have different background and font settings.

The live sample below shows a sample chart with such settings in action:

Live Sample:  Grouped Tooltip - Series Type Settings

to top

Chart Defaults

For a given chart, you can configure all the tooltips in the chart one standard way and, unlike in the previous section, you can also set a standard background, title and separator for them all:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <tooltip_settings>
07           <grouped_tooltip>
08             <labels>
09               <font size="16" />
10             </labels>
11             <background>
12               <fill opacity="0.5" />
13             </background>
14             <title>
15               <format><![CDATA[Tooltip: ]]></format>
16             </title>
17           </grouped_tooltip>
18         </tooltip_settings>
19       </chart>
20     </charts>
21   </settings>
22 </stock>
01{
02  settings: {
03    charts: [
04      {
05        tooltipSettings: {
06          groupedTooltip: {
07            labels: {
08              font: {
09                size: 16
10              }
11            },
12            background: {
13              fill: {
14                opacity: 0.5
15              }
16            },
17            title: {
18              format: "Tooltip: "
19            }
20          }
21        }
22      }
23    ]
24  }
25}

Please note: Setting anything on this level doesn't cancel the settings on the levels described above. In the live sample below we use series type settings, individual series settings and chart defaults at the same time:

Live Sample:  Grouped Tooltip - Chart Default Settings

to top

All Charts Default

And another level higher, where you can configure all the tooltips on all the charts:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <tooltip_settings tooltip_mode="Grouped">
05       <grouped_tooltip>
06         <title enabled="false" />
07       </grouped_tooltip>
08     </tooltip_settings>
09   </settings>
10 </stock>
01{
02  settings: {
03    tooltipSettings: {
04      tooltipMode: "Grouped",
05      groupedTooltip: {
06        title: {
07          enabled: false
08        }
09      }
10    }
11  }
12}

Please note: Setting anything on this level doesn't cancel the settings on the levels described above. In the live sample below we combine the settings again:

Live Sample:  Grouped Tooltip - All Charts Default Settings

to top

Configuration and Formatting

To find out how to configure a tooltip element's text and visual settings and layout, please refer to:

to top