categoryAxis.select Object

The selected axis range. If set, axis selection will be enabled.

The range is index based, starting from 0. Categories with indexes in the range [select.from, select.to) will be selected. That is, the last category in the range will not be included in the selection.

If the categories are dates, the range must also be specified with date values.

Selection is only supported if the axis is horizontal.

Example - select the second category initially

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      max: 3
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.from Object

The lower boundary of the selected range.

Example - set the category axis selection lower boundary

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.max Object

The maximum value which the user can select.

Example - set the category axis selection maximum

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      max: 3
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.min Object

The minimum value which the user can select.

Example - set the category axis selection minimum

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      min: 1
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.mousewheel Object

The mouse wheel configuration of the selection.

Example - configure the category axis selection mouse wheel behavior

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      mousewheel: {
        reverse: false,
        zoom: "left"
      }
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.mousewheel.reverse Boolean (default: true)

If set to true will reverse the mouse wheel direction. The normal direction is down for "zoom out", up for "zoom in".

Example - disable reverse mouse wheel selection

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      mousewheel: {
        reverse: false
      }
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.mousewheel.zoom String (default: "both")

The zoom direction.

The supported values are:

• "both" - zooming expands and contracts the selection both sides
• "left" - zooming expands and contracts the selection left side only
• "right" - zooming expands and contracts the selection right side only

Example - set the category axis selection zoom

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      mousewheel: {
        zoom: "left"
      }
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.select.to Object

The upper boundary of the selected range.

The category with the specified index (date) is not included in the selected range unless the axis is justified. In order to select all categories set a value larger than the last category index (date).

Example - set the category axis selection lower boundary

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>