tooltip Object

The data point tooltip configuration options.

tooltip.background String

The background color of the tooltip. The default is determined from the series color.

tooltip.border Object

The border configuration options.

tooltip.border.color String(default: "black")

The color of the border.

tooltip.border.width Number(default: 0)

The width of the border.

tooltip.color String

The text color of the tooltip. The default is the same as the series labels color.

tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

tooltip.format String

The tooltip format.

Example

    //sets format of the tooltip
    format: "C"

tooltip.padding Number|Object

The padding of the tooltip.

Example

    // sets the top, right, bottom and left padding to 3px.
    padding: 3


    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }

tooltip.template String|Function

The tooltip template. Template variables:

• value - the point value
• category - the category name
• series - the data series
• dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

<div id="chart"></div>
<script>
$("#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 #"
     }
});
</script>

tooltip.visible Boolean(default: false)

A value indicating if the tooltip should be displayed.

tooltip.shared Boolean(default: false)

A value indicating if the tooltip should be shared.

tooltip.sharedTemplate String

The shared tooltip template. Template variables:

• points - the category points
• category - the category name

Example

<div id="chart"></div>
<script>
$("#chart").kendoChart({
     title: {
         text: "Internet Users"
     },
     series: [{
         name: "United States",
         data: [67.96, 68.93, 75, 74, 78]
     }, {
         name: "World",
         data: [15.7, 16.7, 20, 23.5, 26.6]
     }],
     categoryAxis: {
         categories: [2005, 2006, 2007, 2008, 2009]
     },
     tooltip: {
         visible: true,
         shared: true,
         sharedTemplate:
            "#= category # </br>" +
            "# for (var i = 0; i < points.length; i++) { #" +
                "#= points[i].series.name #: #= points[i].value # </br>" +
            "# } #"
     }
});
</script>