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

Navigator.series

configuration

Array of series definitions.

Accepts the same options as the root series collection.

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

navigator.series

Array

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

navigator.series.aggregate

String|Function

The aggregate function to apply for date series.

This function is used when a category (an year, month, etc.) contains two or more points. The function return value is displayed instead of the individual points.

The supported values are:

"avg" - the average of all values for the date period.
"count" - the number of values for the date period.
"max" - the highest value for the date period.
"min" - the lowest value for the date period.
"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.
"sumOrNull" - the sum of all values for the date period. Defaults to null if no data points are defined.
"first" - the first value
function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.
object - (compound aggregate) Applicable to "candlestick" and ohlc "series". Specifies the aggregate for each data item field.

pseudo

    aggregate: {
        open: "max",
        high: "max",
        close: "min",
        low: "max"
    }

Default: "max"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          type: "line",
          aggregate: "avg",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.axis

String

The name of the value axis to use.

** Applicable to area, column, line, ohlc and candlestick series **

Default: "primary"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          type: "line",
          axis: "primary",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.border

Object

The border of the points.

** Applicable to column, ohlc and candlestick series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            border: {
                color: "black",
                width: 2
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.categoryField

String

The data item field which contains the category name or date.

The points will be rendered in chronological order if the category is a date.

If specified, the dateField option is used as a default.

Default: "category"

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

navigator.series.closeField

String

The data field containing the close value.

** Available for candlestick and ohlc series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.color

String

The series base color. The supported values are:

CSS color string, including hex and rgb
function(point) - user-defined function that will be evaluated for each point. Returning undefined will assume the default series color.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          color: "red",
          type: "line",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.colorField

String

The data field containing the point color.

** Applicable for column, candlestick and ohlc series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          color: "red",
          type: "line",
          colorField: "color",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
              color: 'red'
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
              color: 'blue'
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
              color: 'yellow'
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.dashType

String

The dash type of line chart.

The dashType option is taken into consideration only if the series.type option is set to "line".

The following dash types are supported:

"dash" - a line consisting of dashes
"dashDot" - a line consisting of a repeating pattern of dash-dot
"dot" - a line consisting of dots
"longDash" - a line consisting of a repeating pattern of long-dash
"longDashDot" - a line consisting of a repeating pattern of long-dash-dot
"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
"solid" - a solid line

Default: "solid"

<div id="stock-chart"></div>
<script>
  $("#stock-chart").kendoStockChart({
    series: [
      {
        dashType: "dashDot",
        type: "line",
        type: "candlestick",
        openField: "Open",
        highField: "High",
        lowField: "Low",
        closeField: "Close",
        data:[{
          "Date": "2016/01/01",
          "Open": 41.62,
          "High": 41.69,
          "Low": 39.81,
          "Close": 40.12,
          "Volume": 2632000
        }, {
          "Date": "2016/03/01",
          "Open": 40.62,
          "High": 39.69,
          "Low": 40.81,
          "Close": 39.12,
          "Volume": 2631986
        }
              ]
      }
    ],
    dateField: "Date"
  });
</script>

navigator.series.data

Array

Array of data items. The data item type can be either a:

Array of objects. Each point is bound to the specified series fields.
Array of numbers. Available for area, column and line series.
Array of arrays of numbers. Available for:
- OHLC and candlestick series (open, high, low, close)

Set the chart series data as array of objects

pseudo

  <div id="stock-chart"></div>
  <script>
  $("#stock-chart").kendoStockChart({
    series: [
      {
        type: "candlestick",
        data: [{
          open: 2,
          high: 4,
          low: 1,
          close: 3
        }]
      }
    ],
    categoryAxis: {
      categories: [
        new Date(2012, 1, 1)
      ]
    }
  });
  </script>

Set the chart series data as array of arrays

pseudo

    <div id="stock-chart"></div>
    <script>
    $("#stock-chart").kendoStockChart({
      series: [
          {
            type: "candlestick",
            openField: "Open",
            highField: "High",
            lowField: "Low",
            closeField: "Close",
            data:[{
              "Date": "2016/01/01",
              "Open": 41.62,
              "High": 41.69,
              "Low": 39.81,
              "Close": 40.12,
              "Volume": 2632000
            }, {
              "Date": "2016/03/01",
              "Open": 40.62,
              "High": 39.69,
              "Low": 40.81,
              "Close": 39.12,
              "Volume": 2631986
            }
          ]
        }
      ],
      categoryAxis: {
        categories: [
          new Date(2012, 1, 1)
        ]
      }
    });
    </script>

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          type: "line",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.downColor

String

The series color when the open value is greater than the close value.

** Available for candlestick series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            downColor: "red"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 3, high: 4, low: 1, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 3, low: 1, close: 1.5 }
        ]
    }
});
</script>

navigator.series.downColorField

String

The data field containing the color applied when the open value is greater than the close value.

** Available for candlestick series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            downColorField: "downColor"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 3, high: 4, low: 1, close: 2, downColor: "red" },
            { date: new Date("2016/01/02"), open: 2, high: 3, low: 1, close: 1.5, downColor: "orange" }
        ]
    }
});
</script>

navigator.series.field

String

The data field containing the series value.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        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.series.gap

Number

The distance between category clusters.

** Applicable for column, candlestick and ohlc series. **

Default: 1.5

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            gap: 2,
            type: "line",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.highField

String

The data field containing the high value.

** Available for candlestick and ohlc series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight

Object

Configures the appearance of highlighted points.

** Applicable to candlestick and ohlc series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                color: "red",
                opacity: 0.5
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.labels

Object

Configures the series data labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          type: "line",
          labels: {
                visible: true,
                format: "{0}"
            },
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.line

String | Object

Line options.

** Applicable to area, candlestick and ohlc series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            line: {
                color: "red",
                width: 2
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.lowField

String

The data field containing the low value.

** Available for candlestick and ohlc series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.markers

Object

Marker options.

** Applicable for area and line series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            markers: {
                visible: true,
                size: 8
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.missingValues

String

The behavior for handling missing values. The supported values are:

"gap" - the plot stops before the missing point and continues after it.
"interpolate" - the value is interpolated from neighboring points.
"zero" - the value is assumed to be zero.

The default value is "interpolate", except for "area" and stacked series which default to "zero".

The missingValues option is supported when series.type is set to "area" and "line".

<div id="stockChart"></div>
<script>
    $(document).ready(function () {
    // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },  
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
            series: {
                type: "line", // You can use "area", "candlestick", "ohlc" too
                data: stockData, // Navigator needs its own data reference
                field: "close", // Use closing price for navigator
                dateField: "date",
                markers: {
                visible: true,
                missingValues: "gap"
                }
            },
            select: {
                from: new Date(2024, 0, 10), // Initial selection start
                to: new Date(2024, 0, 20)    // Initial selection end
            }
        },
        categoryAxis: {
            baseUnit: "days",
            labels: {
                format: "MMM dd"
            }
        },
        valueAxis: {
            labels: {
                format: "${0}"
            }
        }
    });
    });
</script>

navigator.series.name

String

The navigator series name.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  navigator: {
      series: [
        {
          field: "value",
          name: "Value",
          visibleInLegend: true
        }
      ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
</script>

The name can also be a template which sets the name of the series when bound to grouped data source.

The fields which can be used in the template are:

series - the series options
group - the data group
group.field - the name of the field used for grouping
group.value - the field value for this group.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  navigator: {
      series: [
        {
          field: "value",
          name: "Value: #: group.value #",
          visibleInLegend: true
        }
      ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
</script>

navigator.series.opacity

Number

The series opacity.

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },   
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick",
        	    data: stockData,
        	    field: "close",
        	    dateField: "date",
        	    opacity: 0.5
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

navigator.series.openField

String

The data field containing the open value.

** Available for candlestick and ohlc series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.overlay

Object

The effects overlay.

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },    
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date",
        	    overlay: {
                	gradient: "glass"
            	}
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

navigator.series.spacing

Number

Space between points as proportion of the point width.

Available for column, candlestick and ohlc series.

Default: 0.4

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 }, 
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date",
        	    spacing: 0.8
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

navigator.series.stack

Boolean|String|Object

A boolean value indicating if the series should be stacked. A string value is interpreted as navigator.series.stack.group.

The stack options is supported when navigator.series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

Stack settings of the first series are applied to the rest of the series.

Default: false

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "bar", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date",
        	    stack: true
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

navigator.series.style

String

The supported values are:

"normal" - The values will be connected with straight line.
"step" - The values will be connected with a line with right angle.

The default value is "normal".

The style option is supported when series.type is set to "area", "line".

Default: "normal"

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
        
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "area",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "area",
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date",
        	    markers: {
                visible: true,
        	      style: "step"
        	    }
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

navigator.series.tooltip

Object

The data point tooltip configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: {
            tooltip: {
                visible: true,
                template: "Value: #= value #"
            }
        }
    }
});
</script>

navigator.series.type

String

The type of the series. Available types:

candlestick, ohlc
column
bullet
area
line

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        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.series.width

Number

The line width.

** Applicable for line series. **

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

Related Members