CategoryAxis.autoBaseUnitSteps
configurationThe discrete categoryAxis.baseUnitStep values when either categoryAxis.baseUnit is set to "fit" or categoryAxis.baseUnitStep is set to "auto".
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
days: [3]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The days unit steps.
Default: [1, 2, 3]
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
days: [1, 2, 3, 7]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The hours unit steps.
Default: [1, 2, 3]
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
hours: [1, 2, 4, 6, 12]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The minutes unit steps.
Default: [1, 2, 5, 15, 30]
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
minutes: [1, 5, 10, 15, 30, 60]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The months unit steps.
Default: [1, 2, 3, 6]
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
months: [1, 3, 6, 12]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The weeks unit steps.
Default: [1, 2]
<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"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
baseUnitStep: "auto",
autoBaseUnitSteps: {
weeks: [1, 2, 4]
},
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>The years unit steps.
Default: [1, 2, 3, 5, 10, 25, 50]
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
categoryAxis: {
autoBaseUnitSteps: {
years: [1, 2, 5, 10, 20]
}
},
series: [{
type: "line",
data: [
{ date: new Date(2023, 0, 1), value: 10 },
{ date: new Date(2023, 0, 2), value: 20 },
{ date: new Date(2023, 0, 3), value: 15 }
],
}]
});
</script>