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

Navigator

configuration

The data navigator configuration options.

navigator

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.autoBind

Boolean

Indicates whether the navigator will call read on the data source initially. Applicable only when using a dedicated navigator data source.

Default: true

<div id="stock-chart"></div>
<script>
var navigatorDataSource = new kendo.data.DataSource({
    data: [
        { date: new Date("2012/01/01"), volume: 1000 },
        { date: new Date("2012/01/02"), volume: 1500 }
    ]
});

$("#stock-chart").kendoStockChart({
    navigator: {
        dataSource: navigatorDataSource,
        autoBind: false
    }
});

// Manual read call when autoBind is false
navigatorDataSource.read();
</script>

pseudo

    <div id="stock-chart"></div>
    <script>
    $("#stock-chart").kendoStockChart({
        navigator: {
            dataSource: naviDataSource,
            autoBind: false
        }
    });

    //Call the navigator dataSource's read method
    //naviDataSource.read();
    </script>

navigator.categoryAxis

Object

The category axis configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            labels: {
                color: "red"
            },
            background: "#f0f0f0"
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.dataSource

Object

Navigator DataSource configuration or instance.

When the navigator is bound via its own data source, it will automatically set "from" and "to" filters on the main data source.

This, in conjunction with server filtering, allows you to visualize large data sets without loading them at once.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), price: 10 },
            { date: new Date("2012/01/02"), price: 15 }
        ]
    },
    navigator: {
        dataSource: {
            data: [
                { date: new Date("2012/01/01"), volume: 1000 },
                { date: new Date("2012/01/02"), volume: 1500 }
            ]
        }
    }
});
</script>

pseudo

    <div id="stock-chart"></div>
    <script>
    $("#stock-chart").kendoStockChart({
        dataSource: {
            transport: {
                 read: "/stock/detail"
            },
            serverFiltering: true
        },
        navigator: {
            dataSource: {
                transport: {
                    //read: "/stock/volume" 
                }
            }
        }
    });
    </script>

navigator.dateField

String

The field containing the point date. It is used as a default field for the navigator axis.

The data item field value must be either:

####* Date instance

####* String parsable by new Date([field value])

####* String in ASP.NET JSON format, i.e. "/Date(1320825600000-0800)/"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        dateField: "tradeDate"
    },
    dataSource: {
        data: [
            { tradeDate: new Date("2012/01/01"), price: 10 },
            { tradeDate: new Date("2012/01/02"), price: 15 }
        ]
    }
});
</script>

navigator.hint

Object

Default options for the navigator hint.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        hint: {
            visible: true,
            format: "From: {0:d} To: {1:d}"
        }
    }
});
</script>

navigator.pane

Object

The navigator pane configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        pane: {
            background: "lightblue",
            border: {
                color: "navy",
                width: 2
            }
        }
    }
});
</script>

navigator.position

String

The position of the navigator.

The supported values are:

"top" - the navigator is positioned on the top
"bottom" - the navigator is positioned on the bottom (default)

Default: "bottom"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        position: "top",
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.select

Object

Specifies the initially selected range.

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

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

Array

Array of series definitions.

Accepts the same options as the root series collection.

Omitting the array and specifying a single series is also acceptable.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
     navigator: {
        series: {
            type: "line",
            field: "volume"
        }
     } 
});
</script>

navigator.visible

Boolean

The visibility of the navigator.

Default: true

pseudo

    //sets format of the hint
    format: "From: {0:d} To: {1:d}"

Related Members