This article describes how to alter the visual appearance of Grouped tooltips: change background, width, rows spacing, separator and so on.
Grouped tooltip consists of several elements that come from different data series or indicators, by default they are separated by the line feed only, but you can configure them to be separated by the visual separator.
Separator may consist of two lines: top and bottom, you can enable and disable each of them separately:
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 |
<grouped_tooltip> |
06 |
<separator> |
08 |
<bottom_line enabled="false" /> |
09 |
</separator> |
10 |
</grouped_tooltip> |
11 |
</tooltip_settings> |
12 |
</settings> |
13 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | enabled: true, |
05 | tooltipMode: "Grouped", |
06 | groupedTooltip: { |
07 | separator: { |
08 | topLine: { |
09 | enabled: true |
10 | }, |
11 | bottomLine: { |
12 | enabled: false |
13 | } |
14 | } |
15 | } |
16 | } |
17 | } |
18 | } |
Each of the lines is configured as any other line, with opacity, color and thickness:
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 |
<grouped_tooltip> |
06 |
<separator> |
08 |
<bottom_line enabled="true" color="Gray" thickness="1" opacity="0.5" /> |
09 |
</separator> |
10 |
</grouped_tooltip> |
11 |
</tooltip_settings> |
12 |
</settings> |
13 |
</stock> |
01 | { |
02 | settings: { |
03 | tooltipSettings: { |
04 | enabled: true, |
05 | tooltipMode: "Grouped", |
06 | groupedTooltip: { |
07 | separator: { |
08 | topLine: { |
09 | enabled: true, |
10 | color: "Gray", |
11 | thickness: 2 |
12 | }, |
13 | bottomLine: { |
14 | enabled: true, |
15 | color: "Gray", |
16 | thickness: 1, |
17 | opacity: 0.5 |
18 | } |
19 | } |
20 | } |
21 | } |
22 | } |
23 | } |
Sample below shows the grouped tooltip with separators configured as shown above:
When there are a lot of series in the chart, or, for example, some subsequent series are bound logically, you may want to display them in one row. To do so you need to set one element to be put in one line with previous - this can be done using put_in_line of <grouped_tooltip> node.
XML sample below shows four series, which will be shown in two rows instead of four:
01 |
<chart> |
02 |
<series_list> |
03 |
<series type="Spline" data_provider="dp4" color="Orange"> |
05 |
</series> |
06 |
<series type="Spline" data_provider="dp3" color="Blue"> |
08 |
<tooltip_settings> |
09 |
<grouped_tooltip put_in_line="true" /> |
10 |
</tooltip_settings> |
11 |
</series> |
12 |
<series type="Spline" data_provider="dp2" color="Green"> |
14 |
</series> |
15 |
<series type="Spline" data_provider="dp1" color="Red"> |
17 |
<tooltip_settings> |
18 |
<grouped_tooltip put_in_line="true" /> |
19 |
</tooltip_settings> |
20 |
</series> |
21 |
</series_list> |
22 |
</chart> |
01 | { |
02 | seriesList: [ |
03 | { |
04 | type: "Spline", |
05 | dataProvider: "dp4", |
06 | color: "Orange", |
07 | name: "Open" |
08 | }, |
09 | { |
10 | type: "Spline", |
11 | dataProvider: "dp3", |
12 | color: "Blue", |
13 | name: "High", |
14 | tooltipSettings: { |
15 | groupedTooltip: { |
16 | putInLine: true |
17 | } |
18 | } |
19 | }, |
20 | { |
21 | type: "Spline", |
22 | dataProvider: "dp2", |
23 | color: "Green", |
24 | name: "Low" |
25 | }, |
26 | { |
27 | type: "Spline", |
28 | dataProvider: "dp1", |
29 | color: "Red", |
30 | name: "Close", |
31 | tooltipSettings: { |
32 | groupedTooltip: { |
33 | putInLine: true |
34 | } |
35 | } |
36 | } |
37 | ] |
38 | } |
Live Sample with grouped tooltip where for elements are put in two rows:
You can change the space between the rows in a grouped tooltip using items_spacing attribute of <grouped_tooltip> node:
01 |
<tooltip_settings tooltip_mode="Grouped"> |
02 |
<grouped_tooltip items_spacing="10" /> |
03 |
</tooltip_settings> |
Live Sample of two similar chart and different spacing in their grouped tooltips:
By default tooltips is shown when you hover the chart and it follows the mouse as you move it over. You can change this behavior and set another positioning mode, if you'd like to.
Grouped tooltip positioning is set using anchor attribute of <grouped_tooltip> node. You can set one of the following value to it:
| anchor |
|---|
| Float |
| LeftTop |
| CenterTop |
| RightTop |
| LeftCenter |
| RightCenter |
| LeftBottom |
| CenterBottom |
| RightBottom |
All fixed anchors place tooltip in one position and tooltips always is shown there. Sample XML to set the anchor:
01 |
<tooltip_settings tooltip_mode="Grouped"> |
02 |
<grouped_tooltip anchor="RightTop" /> |
03 |
</tooltip_settings> |
Live sample with two similar charts and tooltips placed to "RightTop" and "RightBottom" positions:
Grouped tooltip has a common background and title background. Title background configuration is described in Grouped Title description.
Standard <fill> and <border> nodes are used to configure this background. Sample XML for configuration:
01 |
<grouped_tooltip> |
02 |
<background> |
05 |
<keys> |
08 |
</keys> |
09 |
</gradient> |
10 |
</fill> |
12 |
</background> |
13 |
</grouped_tooltip> |
Live sample of the grouped tooltip with such settings:
To learn more about the possible settings see Background Settings or XML Reference.
As any other background you have an ability to configure corners shape using <corners> node. Sample XML for changing the corners of tooltip:
01 |
<grouped_tooltip> |
02 |
<background> |
03 |
<corners type="Cut" left_top="0" right_top="0" right_bottom="10" left_bottom="0" /> |
04 |
</background> |
05 |
</grouped_tooltip> |
01 | { |
02 | background: { |
03 | corners: { |
04 | type: "Cut", |
05 | leftTop: 0, |
06 | rightTop: 0, |
07 | rightBottom: 10, |
08 | leftBottom: 0 |
09 | } |
10 | } |
11 | } |
Live sample of such settings:
To learn more about the possible settings see Background Settings or XML Reference.
You can also change and configure the shadow of tooltip. By default it is turned on, an you can either turn it off or reconfigure. Sample XML:
Live sample of grouped tooltip with red shadow:
To learn more about all possible settings see XML Reference.
You can configure inner margin between tooltip text and border. Simple XML Syntax:
01 |
<tooltip_settings tooltip_mode="Grouped"> |
02 |
<grouped_tooltip> |
03 |
<background> |
04 |
<inside_margin left="20" top="5" right="20" bottom="5" /> |
05 |
</background> |
06 |
</grouped_tooltip> |
07 |
</tooltip_settings> |
01 | { |
02 | tooltipMode: "Grouped", |
03 | groupedTooltip: { |
04 | background: { |
05 | insideMargin: { |
06 | left: 20, |
07 | top: 5, |
08 | right: 20, |
09 | bottom: 5 |
10 | } |
11 | } |
12 | } |
13 | } |
Live Sample with configured margins:
