Skip to content

Charts: Add tooltip.contentTemplate type descriptions #8201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 26, 2025
Merged

Charts: Add tooltip.contentTemplate type descriptions #8201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7964f54
Charts: Add tooltip.contentTemplate type descriptions
arman-boyakhchyan Nov 25, 2025
b4d7081
Add final descriptions & edits
arman-boyakhchyan Nov 26, 2025
614d62f
Add type inheritances for docgen
arman-boyakhchyan Nov 26, 2025
c388010
Fix inheritances for CandleStick & Range
arman-boyakhchyan Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 2 additions & 188 deletions ...reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ default: undefined
---
---
##### shortDescription
Specifies a custom template for a tooltip.
Specifies custom markup for tooltips.

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

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

---
#include btn-open-demo with {
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/TooltipHTMLSupport/"
}

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:

<table class="dx-table full-width">
<tr>
<th>Field name</th>
<th>Description</th>
</tr>
<tr>
<td><code>originalValue</code></td>
<td>The value of the represented point as it is set in the data source.</td>
</tr>
<tr>
<td><code>value</code></td>
<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>
</tr>
<tr>
<td><code>valueText</code></td>
<td>The value of the point being hovered over with applied formatting if the <b>format</b> property is specified</td>
</tr>
<tr>
<td><code>originalArgument</code></td>
<td>The argument value of the represented point as it is set in the data source.</td>
</tr>
<tr>
<td><code>argument</code></td>
<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>
</tr>
<tr>
<td><code>argumentText</code></td>
<td>The argument value of the represented point with applied formatting if the <b>argumentFormat</b> property is specified.</td>
</tr>
<tr>
<td><code>seriesName</code></td>
<td>The series name of the point being hovered over.</td>
</tr>
<tr>
<td><code>point</code></td>
<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>
</tr>
<tr>
<td><code>points</code></td>
<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>.
</tr>
<tr>
<td><code>size</code> (for bubble series only)</td>
<td>The size of the bubble being hovered over as it is set in the data source.</td>
</tr>
</table>

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/'):

<table class="dx-table full-width">
<tr>
<th>Field name</th>
<th>Description</th>
</tr>
<tr>
<td><code>percent</code></td>
<td>The percentage value of the point being hovered over.</td>
</tr>
<tr>
<td><code>percentText</code></td>
<td>The percentage value of the point being hovered over.
</tr>
<td><code>total</code></td>
<td>The total value of all the points with the same argument as the point being hovered over.
<tr>
<td><code>totalText</code></td>
<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>
</tr>
</table>

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/'):

<table class="dx-table full-width">
<tr>
<th>Field name</th>
<th>Description</th>
</tr>
<tr>
<td><code>originalMinValue</code></td>
<td>The value of the first range the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>rangeValue1</code></td>
<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>
</tr>
<tr>
<td><code>rangeValue1Text</code></td>
<td>The first range value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>originalValue</code></td>
<td>The value of the second range the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>rangeValue2</code></td>
<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>
</tr>
<tr>
<td><code>rangeValue2Text</code></td>
<td>The second range value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>valueText</code></td>
<td>A string that contains the following values of the represented point: <b>rangeValue1Text</b> and <b>rangeValue2Text</b>.
The format of the string is the following: "*%rangeValue1Text%* - *%rangeValue2Text%*".</td>
</tr>
</table>

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/'):

<table class="dx-table full-width">
<tr>
<th>Field name</th>
<th>Description</th>
</tr>
<tr>
<td><code>originalOpenValue</code></td>
<td>The open value of the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>openValue</code></td>
<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>
</tr>
<tr>
<td><code>openValueText</code></td>
<td>The open value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>originalCloseValue</code></td>
<td>The close value of the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>closeValue</code></td>
<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>
</tr>
<tr>
<td><code>closeValueText</code></td>
<td>The close value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>originalHighValue</code></td>
<td>The high value of the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>highValue</code></td>
<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>
</tr>
<tr>
<td><code>highValueText</code></td>
<td>The high value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>originalLowValue</code></td>
<td>The low value of the point being hovered over as it is set in the data source.</td>
</tr>
<tr>
<td><code>lowValue</code></td>
<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>
</tr>
<tr>
<td><code>lowValueText</code></td>
<td>The low value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>reductionValue</code></td>
<td>The reduction value of the point being hovered over.</td>
</tr>
<tr>
<td><code>reductionValueText</code></td>
<td>The reduction value of the point being hovered over with applied formatting if the <b>format</b> property is specified.</td>
</tr>
<tr>
<td><code>valueText</code></td>
<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>.
The format of the string is the following: "h: %highValueText% o: %openValueText% c: %closeValueText% l: %lowValueText%".</td>
</tr>
</table>

#include dataviz-ref-functioncontext

#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/APIDisplayATooltip/",
name: "Display a Tooltip"
Expand Down
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/BasePointInfo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ hidden:
---
---
##### shortDescription
<!-- Description goes here -->
Series point data shared across all series types.

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/argument.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String | Number | Date
---
---
##### shortDescription
The argument of the series point.
The point's argument value.

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/argumentText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String
---
---
##### shortDescription
<!-- Description goes here -->
The point's formatted argument (after [argumentFormat]({basewidgetpath}/Configuration/tooltip/#argumentFormat) has been applied).

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/highErrorValue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: Number
---
---
##### shortDescription
<!-- Description goes here -->
The point's high error value (specified in **valueErrorBar**.[highValueField]({basewidgetpath}/Configuration/commonSeriesSettings/valueErrorBar/#highValueField)).

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/lowErrorValue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: Number
---
---
##### shortDescription
<!-- Description goes here -->
The point's low error value (specified in **valueErrorBar**.[lowValueField]({basewidgetpath}/Configuration/commonSeriesSettings/valueErrorBar/#lowValueField)).

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/originalArgument.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String | Number | Date
---
---
##### shortDescription
<!-- Description goes here -->
The point's raw argument value (set in the component data source).

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/originalValue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String | Number | Date
---
---
##### shortDescription
<!-- Description goes here -->
The point's raw value (set in the component data source).

---
<!-- Description goes here -->
4 changes: 2 additions & 2 deletions api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/point.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: any
---
---
##### shortDescription
<!-- Description goes here -->
[Point]({basewidgetpath}/Chart_Elements/Point/) instance of the hovered/pressed series point.

---
<!-- Description goes here -->
Use this object to call [point methods]({basewidgetpath}/Chart_Elements/Point/Methods) or access the [point fields]({basewidgetpath}/Chart_Elements/Point/Fields).
4 changes: 2 additions & 2 deletions api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/points.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: Array<BasePointInfo>
---
---
##### shortDescription
<!-- Description goes here -->
An array of [Point]({basewidgetpath}/Chart_Elements/Point/) instances within the hovered/pressed series.

---
<!-- Description goes here -->
This array is returned in the **tooltip**.[contentTemplate]({basewidgetpath}/Configuration/tooltip/#contentTemplate) argument when [shared]({basewidgetpath}/Configuration/tooltip/#shared) is `true`.
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/seriesName.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: any
---
---
##### shortDescription
The [name](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/name.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#name') of the series that includes the series point.
The point's series [name]({basewidgetpath}/Configuration/series/#name).

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/value.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String | Number | Date
---
---
##### shortDescription
The value of the series point.
The point's value.

---
<!-- Description goes here -->
2 changes: 1 addition & 1 deletion api-reference/10 UI Components/BaseChart/9 Types/BasePointInfo/valueText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: String
---
---
##### shortDescription
<!-- Description goes here -->
The point's formatted value (after [format]({basewidgetpath}/Configuration/tooltip/#format) has been applied).

---
<!-- Description goes here -->
20 changes: 15 additions & 5 deletions api-reference/10 UI Components/dxChart/1 Configuration/tooltip/contentTemplate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,26 @@ default: undefined
---
---
##### shortDescription
<!-- Description goes here -->
Specifies custom markup for tooltips
Copy link

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing period at the end of the sentence. Should be 'Specifies custom markup for tooltips.'

Suggested change
Specifies custom markup for tooltips
Specifies custom markup for tooltips.

Copilot uses AI. Check for mistakes.

##### param(pointInfo): dxChartPointInfo
<!-- Description goes here -->
Series point data.

##### param(element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "tooltip" }

##### return: String | Element | jQuery
<!-- Description goes here -->
#include common-template-return-value

---
<!-- Description goes here -->
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/APIDisplayATooltip/",
name: "Display a Tooltip"
}
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/TooltipHTMLSupport/",
name: "Tooltip HTML Support"
}

#####See Also#####
- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/')
4 changes: 2 additions & 2 deletions api-reference/10 UI Components/dxChart/9 Types/BubblePointInfo/BubblePointInfo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
id: BubblePointInfo
module: viz/chart
export: BubblePointInfo
type: Object
inheritsType: BasePointInfo
generateTypeLink:
---
---
##### shortDescription
<!-- Description goes here -->
Series point data included in the [Bubble]({basewidgetpath}/Series_Types/BubbleSeries/) series.

---
<!-- Description goes here -->
4 changes: 2 additions & 2 deletions api-reference/10 UI Components/dxChart/9 Types/BubblePointInfo/points.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: Array<BubblePointInfo>
---
---
##### shortDescription
<!-- Description goes here -->
An array of [Point]({basewidgetpath}/Chart_Elements/Point/) instances within the hovered/pressed series.

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