Telerik Extensions for ASP.NET MVC

The Chart can display a tooltip when the user hovers a data point.

Chart Tooltip

Configuration

The tooltip is not visible by default. You can enable it by setting the Visible property to true:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => series
        .Pie("RepSales", "DateString")
        .Labels(true);
    )
    .Tooltip(true)
%>

The tooltip can also be configured per-series:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => series
        .Pie("RepSales", "DateString")
        .Tooltip(true)
        .Labels(true);
    )
%>

Formating values

The point value can be formatted using the format property:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => series
        .Pie("RepSales", "DateString")
        .Labels(true);
    )
    .Tooltip(tooltip => tooltip
        .Format("{0}%")
        .Visible(true)
    )
%>

The format string supports a subset of the syntax available in the String.Format function.

Note: Points in XY charts have two values - {0} and {1} (X and Y).

Templates

Tooltip content can be defined with a template when more flexibility is desired. 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.
  • dataItem - the original data item (with Ajax binding).

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => series
        .Pie("RepSales", "DateString")
        .Labels(true);
    )
    .Tooltip(tooltip => tooltip
        .Template("<#= category #> - <#= value #>")
        .Visible(true)
    )
%>

Styling

The tooltip color, font, etc. can be controlled with the respective properties.

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => series
        .Pie("RepSales", "DateString")
        .Labels(true);
    )
    .Tooltip(tooltip => tooltip
        .Font("14px Arial,Helvetica,sans-serif")
        .Background("#c5c5c5")
        .Opacity(0.7)
        .Visible(true)
    )
%>