Show Tooltip for Chart Notes
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I attach a Kendo UI Tootlip to the Chart notes and display it when a note is hovered?
Solution
You can attach a Kendo UI Drawing Tootlip to Kendo UI Chart notes and display it when a note is hovered.
The following example demonstrates how to achieve this behavior.
<div id="chart"></div>
<script>
var grandSlam = [{
"year": "2003",
"win": 13,
"extremum": "MIN: 13",
"loss": 3
},{
"year": "2004",
"win": 22,
"loss": 1
},{
"year": "2005",
"win": 24,
"loss": 2
},{
"year": "2006",
"win": 27,
"extremum": "MAX: 27",
"loss": 1
},{
"year": "2007",
"win": 26,
"loss": 1
},{
"year": "2008",
"win": 24,
"loss": 3
},{
"year": "2009",
"win": 26,
"loss": 2
},{
"year": "2010",
"win": 20,
"loss": 3
},{
"year": "2011",
"win": 20,
"loss": 4
},{
"year": "2012",
"win": 19,
"loss": 3
}];
$("#chart").kendoChart({
dataSource: {
data: grandSlam
},
title: {
text: "Roger Federer Grand Slam tournament performance"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line"
},
series: [{
field: "win",
name: "Wins",
noteTextField: "extremum",
notes: {
label: {
position: "outside"
},
position: "bottom",
visual: function(e) {
// The original note visual
var visual = e.createVisual();
// Set the drawing tooltip options
// https://demos.telerik.com/kendo-ui/drawing/tooltip
visual.options.tooltip = {
content: e.value
};
return visual;
}
}
},{
field: "loss",
name: "Losses"
}],
valueAxis: {
line: {
visible: false
}
},
categoryAxis: {
field: "year",
majorGridLines: {
visible: false
}
}
});
</script>