navigator.series.stackBoolean|String|Object(default: false)
A boolean value indicating if the series should be stacked. A string value is interpreted as navigator.series.stack.group.
The
stackoptions 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.
Example
<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>