Skip to content

Commit e597f4c

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
Charts: Add tooltip.contentTemplate type descriptions (#8201)
1 parent b4b0246 commit e597f4c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+114
-274
lines changed

‎api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md‎

Lines changed: 2 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ default: undefined
55
---
66
---
77
##### shortDescription
8-
Specifies a custom template for a tooltip.
8+
Specifies custom markup for tooltips.
99

1010
##### param(pointInfo): Object
11-
Information on the series point being pressed or hovered over.
11+
Series point data.
1212

1313
##### param(element): DxElement
1414
#include common-ref-elementparam with { element: "tooltip" }
@@ -17,192 +17,6 @@ Information on the series point being pressed or hovered over.
1717
#include common-template-return-value
1818

1919
---
20-
#include btn-open-demo with {
21-
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/TooltipHTMLSupport/"
22-
}
23-
24-
The **pointInfo** object has different fields for different [series types](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/'). The following fields are available for all series types:
25-
26-
<table class="dx-table full-width">
27-
<tr>
28-
<th>Field name</th>
29-
<th>Description</th>
30-
</tr>
31-
<tr>
32-
<td><code>originalValue</code></td>
33-
<td>The value of the represented point as it is set in the data source.</td>
34-
</tr>
35-
<tr>
36-
<td><code>value</code></td>
37-
<td>The value of the represented point. Differs from the <b>originalValue</b> when the axis <a href="/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#valueType">value type</a> is specified explicitly. In this instance, the <b>value</b> field contains a value of the specified type.</td>
38-
</tr>
39-
<tr>
40-
<td><code>valueText</code></td>
41-
<td>The value of the point being hovered over with applied formatting if the <b>format</b> property is specified</td>
42-
</tr>
43-
<tr>
44-
<td><code>originalArgument</code></td>
45-
<td>The argument value of the represented point as it is set in the data source.</td>
46-
</tr>
47-
<tr>
48-
<td><code>argument</code></td>
49-
<td>The argument value of the represented point. Differs from the <b>originalArgument</b> when the axis <a href="/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/#argumentType">argument type</a> differs from the argument type in the data source. In this instance, <b>argument</b> has the similar type as the argument axis.</td>
50-
</tr>
51-
<tr>
52-
<td><code>argumentText</code></td>
53-
<td>The argument value of the represented point with applied formatting if the <b>argumentFormat</b> property is specified.</td>
54-
</tr>
55-
<tr>
56-
<td><code>seriesName</code></td>
57-
<td>The series name of the point being hovered over.</td>
58-
</tr>
59-
<tr>
60-
<td><code>point</code></td>
61-
<td>Information on the point being hovered over. For more information about the field and the point object's methods, refer to the <a href="/Documentation/ApiReference/UI_Components/dxChart/Chart_Elements/Point/">Point</a> topic.</td>
62-
</tr>
63-
<tr>
64-
<td><code>points</code></td>
65-
<td>An array of points with the same argument as the point being hovered over. This field is accessible when the <b>tooltip</b>'s <a href="/Documentation/ApiReference/UI_Components/dxChart/Configuration/tooltip/#shared">shared</a> property is set to <b>true</b>.
66-
</tr>
67-
<tr>
68-
<td><code>size</code> (for bubble series only)</td>
69-
<td>The size of the bubble being hovered over as it is set in the data source.</td>
70-
</tr>
71-
</table>
72-
73-
The following **pointInfo** fields are available for stacked series such as the [full-stacked bar](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/FullStackedBarSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/FullStackedBarSeries/') or [full-stacked area](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/FullStackedAreaSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/FullStackedAreaSeries/'):
74-
75-
<table class="dx-table full-width">
76-
<tr>
77-
<th>Field name</th>
78-
<th>Description</th>
79-
</tr>
80-
<tr>
81-
<td><code>percent</code></td>
82-
<td>The percentage value of the point being hovered over.</td>
83-
</tr>
84-
<tr>
85-
<td><code>percentText</code></td>
86-
<td>The percentage value of the point being hovered over.
87-
</tr>
88-
<td><code>total</code></td>
89-
<td>The total value of all the points with the same argument as the point being hovered over.
90-
<tr>
91-
<td><code>totalText</code></td>
92-
<td>The total value of all the points with the same argument as the point being hovered over. This value is displayed with applied formatting if the <b>format</b> property is specified.</td>
93-
</tr>
94-
</table>
95-
96-
The following **pointInfo** fields are available for the range-like series, such as [range area](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/RangeAreaSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeAreaSeries/') or [range bar](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/RangeBarSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/'):
97-
98-
<table class="dx-table full-width">
99-
<tr>
100-
<th>Field name</th>
101-
<th>Description</th>
102-
</tr>
103-
<tr>
104-
<td><code>originalMinValue</code></td>
105-
<td>The value of the first range the point being hovered over as it is set in the data source.</td>
106-
</tr>
107-
<tr>
108-
<td><code>rangeValue1</code></td>
109-
<td>The first range value of the point being hovered over. Differs from the <b>originalMinValue</b> when the axis <a href="/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#valueType">value type</a> is specified explicitly. In this instance, the <b>rangeValue1</b> field contains the first range value of the specified type.</td>
110-
</tr>
111-
<tr>
112-
<td><code>rangeValue1Text</code></td>
113-
<td>The first range value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
114-
</tr>
115-
<tr>
116-
<td><code>originalValue</code></td>
117-
<td>The value of the second range the point being hovered over as it is set in the data source.</td>
118-
</tr>
119-
<tr>
120-
<td><code>rangeValue2</code></td>
121-
<td>The second range value of the point being hovered over. Differs from the <b>originalValue</b> when the axis <a href="/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#valueType">value type</a> is specified explicitly. In this instance, the <b>rangeValue2</b> field contains the second range value in the specified type.</td>
122-
</tr>
123-
<tr>
124-
<td><code>rangeValue2Text</code></td>
125-
<td>The second range value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
126-
</tr>
127-
<tr>
128-
<td><code>valueText</code></td>
129-
<td>A string that contains the following values of the represented point: <b>rangeValue1Text</b> and <b>rangeValue2Text</b>.
130-
The format of the string is the following: "*%rangeValue1Text%* - *%rangeValue2Text%*".</td>
131-
</tr>
132-
</table>
133-
134-
The following **pointInfo** fields are available for the financial chart series, such as [candle stick](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/CandleStickSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/CandleStickSeries/') or [stock](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/StockSeries '/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StockSeries/'):
135-
136-
<table class="dx-table full-width">
137-
<tr>
138-
<th>Field name</th>
139-
<th>Description</th>
140-
</tr>
141-
<tr>
142-
<td><code>originalOpenValue</code></td>
143-
<td>The open value of the point being hovered over as it is set in the data source.</td>
144-
</tr>
145-
<tr>
146-
<td><code>openValue</code></td>
147-
<td>The open value of the point being hovered over. Differs from the <b>originalOpenValue</b> when the value in the data source is not in a numeric format.</td>
148-
</tr>
149-
<tr>
150-
<td><code>openValueText</code></td>
151-
<td>The open value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
152-
</tr>
153-
<tr>
154-
<td><code>originalCloseValue</code></td>
155-
<td>The close value of the point being hovered over as it is set in the data source.</td>
156-
</tr>
157-
<tr>
158-
<td><code>closeValue</code></td>
159-
<td>The close value of the point being hovered over. Differs from the <b>originalCloseValue</b> when the value in the data source is not in a numeric format.</td>
160-
</tr>
161-
<tr>
162-
<td><code>closeValueText</code></td>
163-
<td>The close value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
164-
</tr>
165-
<tr>
166-
<td><code>originalHighValue</code></td>
167-
<td>The high value of the point being hovered over as it is set in the data source.</td>
168-
</tr>
169-
<tr>
170-
<td><code>highValue</code></td>
171-
<td>The high value of the point being hovered over. Differs from the <b>originalHighValue</b> when the value in the data source is not in a numeric format.</td>
172-
</tr>
173-
<tr>
174-
<td><code>highValueText</code></td>
175-
<td>The high value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
176-
</tr>
177-
<tr>
178-
<td><code>originalLowValue</code></td>
179-
<td>The low value of the point being hovered over as it is set in the data source.</td>
180-
</tr>
181-
<tr>
182-
<td><code>lowValue</code></td>
183-
<td>The low value of the point being hovered over. Differs from the <b>originalLowValue</b> when the value in the data source is not in a numeric format.</td>
184-
</tr>
185-
<tr>
186-
<td><code>lowValueText</code></td>
187-
<td>The low value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
188-
</tr>
189-
<tr>
190-
<td><code>reductionValue</code></td>
191-
<td>The reduction value of the point being hovered over.</td>
192-
</tr>
193-
<tr>
194-
<td><code>reductionValueText</code></td>
195-
<td>The reduction value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
196-
</tr>
197-
<tr>
198-
<td><code>valueText</code></td>
199-
<td>A string that contains the following values of the represented point: <b>highValueText</b>, <b>openValueText</b>, <b>closeValueText</b> and <b>lowValueText</b>.
200-
The format of the string is the following: "h: %highValueText% o: %openValueText% c: %closeValueText% l: %lowValueText%".</td>
201-
</tr>
202-
</table>
203-
204-
#include dataviz-ref-functioncontext
205-
20620
#include common-demobutton-named with {
20721
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/APIDisplayATooltip/",
20822
name: "Display a Tooltip"

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/BasePointInfo.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hidden:
88
---
99
---
1010
##### shortDescription
11-
<!-- Description goes here -->
11+
Series point data shared across all series types.
1212

1313
---
1414
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/argument.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: String | Number | Date
44
---
55
---
66
##### shortDescription
7-
The argument of the series point.
7+
The point's argument value.
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/argumentText.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: String
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
The point's formatted argument (after [argumentFormat]({basewidgetpath}/Configuration/tooltip/#argumentFormat) has been applied).
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/highErrorValue.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: Number
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
The point's high error value (specified in **valueErrorBar**.[highValueField]({basewidgetpath}/Configuration/commonSeriesSettings/valueErrorBar/#highValueField)).
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/lowErrorValue.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: Number
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
The point's low error value (specified in **valueErrorBar**.[lowValueField]({basewidgetpath}/Configuration/commonSeriesSettings/valueErrorBar/#lowValueField)).
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/originalArgument.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: String | Number | Date
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
The point's raw argument value (set in the component data source).
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/originalValue.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: String | Number | Date
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
The point's raw value (set in the component data source).
88

99
---
1010
<!-- Description goes here -->

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/point.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: any
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
[Point]({basewidgetpath}/Chart_Elements/Point/) instance of the hovered/pressed series point.
88

99
---
10-
<!-- Description goes here -->
10+
Use this object to call [point methods]({basewidgetpath}/Chart_Elements/Point/Methods) or access the [point fields]({basewidgetpath}/Chart_Elements/Point/Fields).

‎api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/points.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: Array<BasePointInfo>
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
An array of [Point]({basewidgetpath}/Chart_Elements/Point/) instances within the hovered/pressed series.
88

99
---
10-
<!-- Description goes here -->
10+
This array is returned in the **tooltip**.[contentTemplate]({basewidgetpath}/Configuration/tooltip/#contentTemplate) argument when [shared]({basewidgetpath}/Configuration/tooltip/#shared) is `true`.

0 commit comments

Comments
 (0)