Shared Tooltip for Telerik Blazor Stock Chart

Updated on Oct 1, 2026

The Telerik Stock Chart allows you to show a unified tooltip for all categories in the Chart.

In this article:

• Basics
• Customization
• Parameter Settings
• Shared Template

Basics

The shared tooltip provides summarized information of all data points from the hovered category. This tooltip will take precedence over tooltip settings defined for a specific series.

To enable the shared tooltip:

1. Inside the <TelerikStockChart> tag, add the <StockChartTooltip> tag.
2. Set its Visible parameter to true.
3. Set its Shared parameter to true.

Basic configuration of a Stock Chart with Shared Tooltip

Example

View Source

Loading ...

Customization

There are two types of customizations you can do for the tooltips:

• Parameter Settings - lets you alter cosmetic settings such as borders, colors and padding through simple parameters
• Shared Template - lets you control the entire content

Parameter Settings

You can customize the rendering of the Shared tooltip by using:

• Background - control the background color by applying a CSS color string, including HEX and RGB. By default the it will match the color for the category.

• Color - control the text color by applying a CSS color string, including HEX and RGB.

Shared Template

The SharedTemplate allows you to control the rendering of the shared tooltip.

In the template you can:

• Use business logic and render HTML

• Use the context parameter that provides information about the current category and all data points in it.

The context contains the following information:

• Category - renders the name of the Category.

• Points - a collection of data for each series data point in this category.

Each Point contains the following data:

• DataItem - provides the data model of the current series item. You need to cast it to the type from your data source, which needs to be serializable.

  • For OHLC and Candlestick chart types the DataItem will contain the information mapped to the OpenField, CloseField, HighField and LowField properties.
  • For Line, Area and Column the DataItem will contain the information mapped to the Field properties.
  • The DataItem will contain an aggregated value for the date, so in order to get it you can use the Category and parse it to DateTime.

• Category - provides information on the category the data point is located in. Since the Stock Chart has a date X axis the Category should be cast to DateTime.

• SeriesIndex - provides the index of the <StockChartSeries> the data point belongs to.

• Percentage - for the Stock Chart the value will always be 0.

• SeriesName - bound to the Name parameter of the <StockChartSeries> the data point belongs to.

• SeriesColor - shows the RGB color of the Series the data point belongs to.

• CategoryIndex - shows the index of the data point's x-axis category.

Usage of the SharedTemplate

Example

View Source

Loading ...

See Also

• Stock Chart Overview
• Stock Chart Tooltip Overview