Making a chart interactive by adding events

The Kendo UI Chart library can define various event handlers, which will be triggered when the user hovers or clicks on a data item in a series. In this recipe, we will display a tooltip when the user hovers over a data item in the chart, and in another example, we will change the color of the selected column when the user clicks on it.

How to do it…

Let's consider the same DataSource object that we used to show the adoption of the Chrome browser over the years. In this example, let's add another field, feature, that we will use to show tooltip:

var chromeBrowser = [{
  'year'       : 2008,
  'percentage' : 0,
  'feature'    : 'First stable release'
}, {
  'year'       : 2009,
  'percentage' : 4,
  'feature'    : 'HTML5 Video and Audio tag support'
}, {
  'year'       : 2010,
  'percentage' : 15,
  'feature'    : 'Support for WebM videos'
}, {
  'year'       : 2011,
  'percentage' : 26,
  'feature'    : 'Hardware accelerated 3D CSS'
}, {
  'year'...