Tooltip

The Telerik UI Chart enables you to display details about the data point over which the mouse is currently hovering.

The border of this tooltip matches the color of the series.

The Chart tooltip

Getting Started

By default, the tooltip of the Chart is not visible. You can enable it by setting the visible property of the tooltip object to true.

    @(Html.Kendo().Chart()
        .Name("chart")
        .Series(s => s
            .Bar(new double[] { 67.96, 68.93, 75, 74, 78 })
        )
        .CategoryAxis(c => c
            .Categories(new string[] { "2005", "2006", "2007", "2008", "2009" })
        )
        .Tooltip(t => t.Visible(true))
    )

The tooltip can also be configured per series.

    .Series(s => s
        .Bar(new double[] { 67.96, 68.93, 75, 74, 78 })
        .Tooltip(t=>t.Visible(true))
    )

Using Format Values

To format the point value, use the Format property. In the following example, N0 indicates that the value will be rounded to a whole number and will have a thousands separator. For more information on the number and date formats in Kendo UI, refer to the articles about number formatting and date formatting.

Points in categorical (XY) Charts have two values—{0} and {1} (X and Y).

    .Tooltip(t => t
        .Visible(true)
        .Format("Value: {0:N0}")
    )

Using Templates

To provide better flexibility, define the content of a tooltip through a template.

The template provides access to all information associated with the point:

  • value—The point value. Value dimensions are available as properties, for example, value.x and value.y.
  • category—The category name.
  • series—The data series.
  • (When binding to a data source) dataItem—The original data item.
    .Tooltip(t => t
        .Visible(true)
        .Template("Value: #= value # ; Category: #= category #")
    )

You can also use an external template by specifying TemplateId.

    .Tooltip(t => t
        .Visible(true)
        .TemplateId("tooltipTemplate")
    )
    <script id="tooltipTemplate" type="text/x-kendo-template">
        Value: #= value # ; Category: #= category #
    </script>

See Also

In this article
Not finding the help you need? Improve this article