navigator.series.markersObject
Marker options.
** Applicable for area and line series. **
Example
<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.markers.backgroundString
The background color of the current series markers.
Example
<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,
background: "red"
},
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.markers.borderObject
The border of the markers.
Example
<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,
border: {
color: "black",
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.markers.border.colorString(default: "black")
The color of the border.
Example
<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,
border: {
color: "black",
}
},
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.markers.border.widthNumber(default: 0)
The width of the border.
Example
<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,
border: {
width: 3,
}
},
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.markers.rotationNumber|Function
The rotation angle of the markers.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
series: [{
type: "line",
field: "value",
categoryField: "date",
markers: {
type: "square",
rotation: 45
},
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
}
});
</script>navigator.series.markers.sizeNumber(default: 6)
The marker size.
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({
title: {
text: "Tech Company Inc. (TCI) - Stock Prices"
},
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",
color: "#03a9f4",
downColor: "#f44336"
}],
// ADDED NAVIGATOR CONFIGURATION
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,
size: 20
}
},
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.markers.typeString(default: "circle")
Configures the markers shape type.
Example
<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({
title: {
text: "Tech Company Inc. (TCI) - Stock Prices"
},
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",
color: "#03a9f4",
downColor: "#f44336"
}],
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,
size: 20,
type: "triangle"
}
},
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>"square"
The marker shape is square.
"triangle"
The marker shape is triangle.
"circle"
The marker shape is circle.
"cross"
The marker shape is cross.
navigator.series.markers.visibleBoolean(default: false)
The markers visibility.
Example
<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({
title: {
text: "Tech Company Inc. (TCI) - Stock Prices"
},
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",
color: "#03a9f4",
downColor: "#f44336"
}],
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,
size: 20,
type: "triangle"
}
},
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>In this article