# Shared Tooltip for Telerik Blazor Chart The Telerik Chart allows you to show a unified tooltip for all categories in [Categorical](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#series-types) Charts. In this article: * [Basics](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#basics) * [Customization](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#customization) * [Parameter Settings](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#parameter-settings) * [Shared Template](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#shared-template) ## Basics The shared tooltip provides summarized information of all data points from the hovered category (applies for [Categorical Charts](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#series-types)). This tooltip will take precedence over tooltip settings defined for a specific series. To enable the shared tooltip: 1. Inside the `` tag, add the `` tag. 2. Set its `Visible` parameter to `true`. 3. Set its `Shared` parameter to `true`. > caption Basic configuration of a Chart with Shared Tooltip ## Customization There are two types of customizations you can do for the tooltips: * [Parameter Settings](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#parameter-settings) - lets you alter cosmetic settings such as borders, colors and padding through simple parameters * [Shared Template](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/shared#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](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#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](https://www.telerik.com/blazor-ui/documentation/components/chart/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](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#series-types). * When using a [Date Axis](https://www.telerik.com/blazor-ui/documentation/components/chart/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](https://www.telerik.com/blazor-ui/documentation/components/chart/types/donut), [Pie](https://www.telerik.com/blazor-ui/documentation/components/chart/types/pie) and [Stacked 100%](https://www.telerik.com/blazor-ui/documentation/components/chart/stacked-series#stack-100) Charts - the percentage value of the current data point from the whole. * `SeriesIndex` - provides the index of the `` the data point belongs to. * `SeriesName` - bound to the `Name` parameter of the `` 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. > caption Usage of the SharedTemplate ## See Also * [Chart Overview](https://www.telerik.com/blazor-ui/documentation/components/chart/overview) * [Chart Tooltip Overview](https://www.telerik.com/blazor-ui/documentation/components/chart/tooltip/overview)