New to Kendo UI for jQuery? Start a free 30-day trial

Navigator.select.mousewheel

configuration

The mousewheel configuration of the selection.

If set to false the mousewheel will not update the selection.

navigator.select.mousewheel

Object | Boolean

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
      select: {
          from: "2012/02/01",
          to: "2012/02/02",
          mousewheel: {
            reverse: true,
            zoom: "both"
          }
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
</script>

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
      select: {
          from: "2012/02/01",
          to: "2012/02/02",
          mousewheel: false
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
</script>

navigator.select.mousewheel.reverse

Boolean

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

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        select: {
            mousewheel: {
                reverse: true
            }
        }
    }
});
</script>

navigator.select.mousewheel.zoom

String

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

Default: "both"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        select: {
            mousewheel: {
                zoom: "left"
            }
        }
    }
});
</script>