navigator.categoryAxis.crosshairObject
The crosshair configuration options.
The crosshair is displayed when the categoryAxis.crosshair.visible option is set to
true.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
color: "red",
width: 2
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.colorString
The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
color: "blue"
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.dashTypestring(default: "solid")
The dash type of the crosshair.
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
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
dashType: "dash"
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.opacityNumber(default: 1)
The opacity of the crosshair. By default the crosshair is opaque.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
opacity: 0.5
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltipObject
The crosshair tooltip options.
The crosshair tooltip is displayed when the categoryAxis.crosshair.tooltip.visible option is set to
true.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
background: "yellow",
color: "black"
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.backgroundString
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
background: "lightblue"
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.borderObject
The border options.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
border: {
color: "red",
width: 2
}
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
border: {
color: "green"
}
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.border.dashTypeString(default: "solid")
This option is ignored and deprecated.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
border: {
dashType: "dash"
}
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.border.widthNumber(default: 0)
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/2"), value: 105 },
{ date: new Date("2023/1/3"), value: 102 }
]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
border: {
width: 3
}
}
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.crosshair.tooltip.colorString
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
color: "red"
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.fontString(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
font: "14px Arial"
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.formatString(default: "{0}")
The format used to display the tooltip. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "Date: {0:yyyy/MM/dd}"
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.paddingNumber|Object(default: 0)
The padding of the crosshair tooltip. A numeric value will set all paddings.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
padding: 10
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.padding.bottomNumber(default: 0)
The bottom padding of the crosshair tooltip.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
padding: {
bottom: 10
}
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.padding.leftNumber(default: 0)
The left padding of the crosshair tooltip.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
padding: {
left: 10
}
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.padding.rightNumber(default: 0)
The right padding of the crosshair tooltip.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
padding: {
right: 10
}
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.padding.topNumber(default: 0)
The top padding of the crosshair tooltip.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
padding: {
top: 10
}
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.templateString|Function
The template which renders the tooltip.
The fields which can be used in the template are:
- value - the category value
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
template: (data) => `Value: ${data.value}`
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.tooltip.visibleBoolean(default: false)
If set to true the chart will display the category axis crosshair tooltip. By default the category axis crosshair tooltip is not visible.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true
}
}
}
}
});
</script>navigator.categoryAxis.crosshair.visibleBoolean(default: false)
If set to true the chart will display the category axis crosshair. By default the category axis crosshair is not visible.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true
}
}
}
});
</script>navigator.categoryAxis.crosshair.widthNumber(default: 1)
The width of the crosshair in pixels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
crosshair: {
visible: true,
width: 3
}
}
}
});
</script>In this article