Shared Tooltip for Telerik Blazor Chart

The Telerik Chart allows you to show a unified tooltip for all categories in Categorical Charts.

In this article:

• Basics
• Customization
  • Parameter Settings
  • Shared Template

Basics

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

To enable the shared tooltip:

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

Basic configuration of a Chart with Shared Tooltip

@* This example shows how to enable a Shared Tooltip *@

<TelerikChart>
    <ChartTooltip Visible="true" Shared="true"></ChartTooltip>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

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.

• Opacity - control the opacity of the tooltip.

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:

• FormattedValue - maps to the default rendering of the tooltip, formatted as a string.

  • Use this when the chart's data is bound by Independent Series Binding. You can parse this to a numerical value (int, double, etc.) in order to apply formatting. Otherwise, use the DataItem to get the value of the point.

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

  • If you are using a Date Axis, the DataItem will contain the only the aggregated value in the corresponding y-value field, because it is a collection of more than one items. See the Category below for details.

• Category - provides information on the category the data point is located in. You need to cast it to the type in your data source, for example DateTime, string, int or another type. The Category parameter is applicable to Categorical Charts.

  • When using a Date Axis, you can use it, together with the BaseUnit value of the axis, to filter the data source and obtain the actual data items from the data source in case you want to provide extra information about them.

• Percentage - applicable to Donut, Pie and Stacked 100% Charts - the percentage value of the current data point from the whole.

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

• SeriesName - bound to the Name parameter of the <ChartSeries> 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

@* This example shows how to use the SharedTemplate and extract information on the data points value, parse them to int and get the category from the context *@

<TelerikChart>
    <ChartTooltip Visible="true" Shared="true">
        <SharedTemplate>
            @{
                var points = context.Points;

                foreach (var point in points)
                {
                    <div>
                        <TelerikSvgIcon Icon="SvgIcon.InfoCircle" />
                        @*this example shows how to parse the FormattedValue to a int,*@
                        @*but you can also parse it to any other type your data uses / has*@
                        Point value: @(int.Parse(point.FormattedValue).ToString("C"))
                        Category: @context.Category
                    </div>
                }
            }
        </SharedTemplate>
    </ChartTooltip>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

See also

• Chart Overview
• Chart Tooltip Overview