axisDefaults.crosshairObject
The crosshair configuration options.
The crosshair is displayed when the axisDefaults.crosshair.visible option is set to
true.
Example - set the default crosshair configuration options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
color: "green",
width: 2,
zIndex:1,
visible: true
}
},
series: [
{ type: "column", data: [[1, 2], [3, 4], [4, 5]] }
]
});
</script>axisDefaults.crosshair.colorString
The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults crosshair color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
color: "blue",
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.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 - set the axisDefaults crosshair dashType
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
dashType: "dash",
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.opacityNumber(default: 1)
The opacity of the crosshair. By default the crosshair is opaque.
Example - set the axisDefaults crosshair opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
visible: true,
opacity: 0.5
}
},
series: [{
type: "line",
data: [1, 2, 3, 4]
}]
});
</script>axisDefaults.crosshair.tooltipObject
The crosshair tooltip options.
The crosshair tooltip is displayed when the axisDefaults.crosshair.tooltip.visible option is set to
true.
Example - configure the axisDefaults crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
visible: true,
background: "yellow",
color: "black"
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.backgroundString
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults crosshair tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
background: "lightgreen",
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.borderObject
The border options.
Example - configure the axisDefaults crosshair tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
border: {
color: "blue",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults crosshair tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
border: {
color: "red",
width: 1
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.border.dashTypeString(default: "solid")
This option is ignored and deprecated.
Example - set the axisDefaults crosshair tooltip border dashType
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
border: {
dashType: "dash",
width: 1
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.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 - set the axisDefaults crosshair tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
border: {
width: 3,
color: "blue"
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.colorString
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults crosshair tooltip color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
color: "red",
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.fontString(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
Example - set the axisDefaults crosshair tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
font: "16px sans-serif",
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.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 - set the axisDefaults crosshair tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
format: "Value: {0:N2}",
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.paddingNumber|Object(default: 0)
The padding of the crosshair tooltip. A numeric value will set all paddings.
Example - set the axisDefaults crosshair tooltip padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
padding: 10,
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.padding.bottomNumber(default: 0)
The bottom padding of the crosshair tooltip.
Example - set the axisDefaults crosshair tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
padding: {
bottom: 10
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.padding.leftNumber(default: 0)
The left padding of the crosshair tooltip.
Example - set the axisDefaults crosshair tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
padding: {
left: 15
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.padding.rightNumber(default: 0)
The right padding of the crosshair tooltip.
Example - set the axisDefaults crosshair tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
padding: {
right: 8
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.padding.topNumber(default: 0)
The top padding of the crosshair tooltip.
Example - set the axisDefaults crosshair tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
padding: {
top: 12
},
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.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 - set the axisDefaults crosshair tooltip template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
template: "Category: #: value #",
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.tooltip.visibleBoolean(default: false)
If set to true the chart will display the axis crosshair tooltip. By default the axis crosshair tooltip is not visible.
Example - set the axisDefaults crosshair tooltip visible
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
tooltip: {
visible: true
},
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.visibleBoolean(default: false)
If set to true the chart will display the axis crosshair. By default the axis crosshair is not visible.
Example - set the axisDefaults crosshair visible
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.crosshair.widthNumber(default: 1)
The width of the crosshair in pixels.
Example - set the axisDefaults crosshair width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
crosshair: {
width: 5,
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>In this article