Blazor Chart Tooltips

    In Blazor charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the IgbCategoryChart, IgbFinancialChart, and IgbDataChart controls.

    Blazor Chart Tooltip Types

    Blazor Chart provide three types of tooltips that you can with tooltips enabled by setting the ToolTipType property. The following example shows the Column Chart with a combo-box that you can use to change type of tooltips.

    The ToolTipType property is configurable and can be set to one of the following options:

    Property Value Description
    Default Tooltip Display a tooltip for a single item when the pointer is positioned over it.
    Data Tooltip Display the data tooltips for all series in the chart.
    Item Tooltip Display a tooltip for each data item in the category that the pointer is positioned over.
    Category Tooltip Display a grouped tooltip for all data points in the category that the pointer is positioned over.

    Blazor Chart Tooltip Template

    If none of built-in types of tooltips are matching your requirements, you can create your own tooltips to display and style series title, data values, and axis values. The following sections demonstrate how to do this in different types of Blazor charts.

    Custom Tooltips in Category Chart

    This example shows how to create custom tooltips for all series in Blazor IgbCategoryChart control. Note that you can also apply the same logic to custom tooltips in Blazor IgbFinancialChart control.

    Custom Tooltips in Data Chart

    This example shows how to create custom tooltips for each series in Blazor Data Chart control.

    Additional Resources

    You can find more information about related chart features in these topics:

    API References

    The IgbCategoryChart and IgbFinancialChart components share the following API properties:

    In the IgbDataChart component, you can use the following API components and properties: