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

Navigator.select

configuration

Specifies the initially selected range.

The full range of values is shown if no range is specified.

navigator.select

Object

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

      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.from

Date`|`String

The lower boundary of the selected range.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        select: {
            from: new Date("2023/1/1"),
            to: new Date("2023/3/1")
        }
    }
});
</script>

navigator.select.mousewheel

Object | Boolean

The mousewheel configuration of the selection.

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

<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.to