Tooltip
The Kendo 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.
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.
$("#chart").kendoChart({
series: [{
type: "bar",
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}],
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
visible: true
}
});
The tooltip can also be configured per series.
series: [{
type: "bar",
name: "United States",
data: [67.96, 68.93, 75, 74, 78],
tooltip: {
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: {
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.xandvalue.y. -
category—The category name. -
series—The data series. -
(When binding to a data source)
dataItem—The original data item.$("#chart").kendoChart({ title: { text: "My Chart Title" }, series: [{ name: "Series 1", data: [200, 450, 300, 125] }], categoryAxis: { categories: [2000, 2001, 2002, 2003] }, tooltip: { visible: true, template: "${category} - ${value}" } });