01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | enabled: true |
05 | } |
06 | } |
07 | } |
Separated Tooltips
Overview
Unlike Grouped - Separated tooltip is the type that shows one tooltip for each series shown on the chart. Its configuration is in many ways similar to the one of Grouped tooltip, but there is a lot of special options and display modes.
This article describes all the available display modes and explains how to configure them.
Enable/Disable
To enable/disable tooltips, you need to use the enabled attribute of the <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 tooltips on all charts:
XML/JSON Syntax
To use Separated tooltips, you need to set the tooltip_mode attribute to "Separated":
XML/JSON Syntax
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="Separated" /> |
05 |
</settings> |
06 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | enabled: true, |
05 | tooltipMode: "Separated" |
06 | } |
07 | } |
08 | } |
Display Modes
Separated tooltips show one tooltip for each series, and there are three ways to doing that:
- All Charts - show all tooltips on all charts.
- Current Chart - show all tooltips on the active chart (the one under the mouse pointer).
- Active Point - show a tooltip only for the point under the mouse pointer.
The samples and configuration for all the modes are given below.
All Charts
Showing all tooltips on all charts in the separated mode is reasonable when you have a relatively small number of series shown and want to highlight all the available values:
To activate this mode, you need to specify it in the display_mode attribute of the <tooltip_settings> node:
XML/JSON Syntax
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 display_mode="AllCharts" tooltip_mode="Separated" enabled="true" /> |
05 |
</settings> |
06 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | displayMode: "AllCharts", |
05 | tooltipMode: "Separated", |
06 | enabled: true |
07 | } |
08 | } |
09 | } |
Live Sample for a chart with tooltips in the "Show Separated Tooltips - All Charts" mode:
Live Sample: Separated Tooltip - Display on all the charts
Current Chart
If you have several charts with a relatively small number of series shown on each of them, you may want to choose displaying Separated tooltips for the Current Chart only:
To activate this mode, you need to specify it in the display_mode attribute of the <tooltip_settings> node:
XML/JSON Syntax
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 display_mode="CurrentChart" tooltip_mode="Separated" enabled="true" /> |
05 |
</settings> |
06 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | displayMode: "CurrentChart", |
05 | tooltipMode: "Separated", |
06 | enabled: true |
07 | } |
08 | } |
09 | } |
Live Sample of a chart with tooltips in the "Show Separated Tooltips - Current Chart Only " mode:
Live Sample: Separated Tooltip - Active Chart
Active Point
When there is a lot of series shown on the chart, you may want to show a tooltip only when user points on some point of one of the series with the mouse:
To enable this mode, you need set the special affects attribute of the <separated_tooltip> node to "CurrentSeries":
XML/JSON Syntax
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="Separated"> |
05 |
<separated_tooltip affects="CurrentSeries" /> |
06 |
</tooltip_settings> |
07 |
</settings> |
08 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | enabled: true, |
05 | tooltipMode: "Separated", |
06 | separatedTooltip: { |
07 | affects: "CurrentSeries" |
08 | } |
09 | } |
10 | } |
11 | } |
Live Sample of a chart with tooltips in the "Show Separated Tooltips - Hovered Point Only " mode:
Live Sample: Separated Tooltip - Active Point
Tooltip Settings
Separated tooltips are always configured in the <separated_tooltip> subnode of the <tooltip_settings> node. This node has a lot of configuration options, which are described in detail in Separate 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.
Individual Settings for Each Series
You can configure all 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
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"> |
09 |
<tooltip_settings> |
10 |
<separated_tooltip> |
12 |
</separated_tooltip> |
13 |
</tooltip_settings> |
14 |
</series> |
15 |
</series_list> |
16 |
</chart> |
17 |
</charts> |
18 |
</settings> |
19 |
</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 | separatedTooltip: { |
13 | format: "Custom Text ({%Value}{numDecimals:2})" |
14 | } |
15 | } |
16 | } |
17 | ] |
18 | } |
19 | ] |
20 | } |
21 | } |
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: Separated Tooltip - Individual Series Settings
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
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> |
07 |
<area_series> |
08 |
<tooltip_settings enabled="true"> |
09 |
<separated_tooltip> |
10 |
<background enabled="true"> |
12 |
</background> |
14 |
</separated_tooltip> |
15 |
</tooltip_settings> |
16 |
</area_series> |
17 |
<line_series> |
18 |
<tooltip_settings enabled="true"> |
19 |
<separated_tooltip> |
20 |
<background enabled="true"> |
22 |
</background> |
24 |
</separated_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 | separatedTooltip: { |
10 | background: { |
11 | enabled: true, |
12 | fill: { |
13 | color: "White" |
14 | } |
15 | }, |
16 | font: { |
17 | color: "Black" |
18 | } |
19 | } |
20 | } |
21 | }, |
22 | lineSeries: { |
23 | tooltipSettings: { |
24 | enabled: true, |
25 | separatedTooltip: { |
26 | background: { |
27 | enabled: true, |
28 | fill: { |
29 | color: "Black" |
30 | } |
31 | }, |
32 | font: { |
33 | color: "White" |
34 | } |
35 | } |
36 | } |
37 | } |
38 | } |
39 | } |
40 | ] |
41 | } |
42 | } |
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: Separated Tooltip - Series Type Settings
Chart Defaults
You can configure all the tooltips on a chart one standard way:
XML/JSON Syntax
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 |
<separated_tooltip> |
09 |
</separated_tooltip> |
10 |
</tooltip_settings> |
11 |
</chart> |
12 |
</charts> |
13 |
</settings> |
14 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | tooltipSettings: { |
06 | separatedTooltip: { |
07 | font: { |
08 | size: 16 |
09 | } |
10 | } |
11 | } |
12 | } |
13 | ] |
14 | } |
15 | } |
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: Separated Tooltip - Chart Default Settings
All Charts Defaults
And another level higher, where you can configure all the tooltips on all the charts:
XML/JSON Syntax
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> |
05 |
<separated_tooltip> |
07 |
</separated_tooltip> |
08 |
</tooltip_settings> |
09 |
</settings> |
10 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | separatedTooltip: { |
05 | font: { |
06 | color: "Red" |
07 | } |
08 | } |
09 | } |
10 | } |
11 | } |
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: Separated Tooltip - All Charts Default Settings
Configuration and Formatting
To find out how to configure a tooltip element's text and visual settings and layout, please refer to: