select

Fired when the user modifies the selection.

The range units are:

  • Generic axis - Category index (0-based)
  • Date axis - Date instance

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.axis Object

The target axis configuration.

e.from Object

The lower boundary of the selected range.

e.sender kendo.dataviz.ui.Chart

The widget instance which fired the event.

e.to Object

The upper boundary of the selected range.

The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].

Example - subscribe to the "select" event during initialization

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1, 10] }
  ],
  categoryAxis: {
    categories: [2011, 2012, 2013],
    select: {
      from: 1,
      to: 5
    }
  },
  select: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.from, e.to);
  }
});
</script>

Example - subscribe to the "select" event after initialization

<div id="chart"></div>
<script>
function chart_select(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(e.from, e.to);
}
$("#chart").kendoChart({
  series: [
    { data: [1, 10] }
  ],
  categoryAxis: {
    categories: [2011, 2012, 2013],
    select: {
      from: 1,
      to: 5
    }
  }
});
var chart = $("#chart").data("kendoChart");
chart.bind("select", chart_select);
</script>
In this article