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

Navigator.series.stack

configuration

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.

navigator.series.stack

Boolean|String|Object

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.stack.group

String

Indicates that the series should be stacked in a group with the specified name.

The group option is supported when navigator.series.type is set to "bar" or "column".

<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: { group: "group1" }
        	},
        	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.type

String

The type of stack to plot. The following types are supported:

"normal" - the value of the stack is the sum of all points in the category (or group)
"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.

Default: "normal"

<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: "bar", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date",
        	    stack: { type: "100%" }
        	},
        	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>