axisDefaults.crosshair Object

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]] }
  ]
});

axisDefaults.crosshair.color String

The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.

axisDefaults.crosshair.dashType String (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

axisDefaults.crosshair.opacity Number (default: 1)

The opacity of the crosshair. By default the crosshair is opaque.

axisDefaults.crosshair.tooltip Object

The crosshair tooltip options.

The crosshair tooltip is displayed when the axisDefaults.crosshair.tooltip.visible option is set to true.

axisDefaults.crosshair.tooltip.background String

The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.

axisDefaults.crosshair.tooltip.border Object

The border options.

axisDefaults.crosshair.tooltip.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

axisDefaults.crosshair.tooltip.border.dashType String (default: "solid")

The dash type of the border.

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

axisDefaults.crosshair.tooltip.border.width Number (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.

axisDefaults.crosshair.tooltip.color String

The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.

axisDefaults.crosshair.tooltip.font String (default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

axisDefaults.crosshair.tooltip.format String (default: "{0}")

The format used to display the tooltip. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.

axisDefaults.crosshair.tooltip.padding Number|Object (default: 0)

The padding of the crosshair tooltip. A numeric value will set all paddings.

axisDefaults.crosshair.tooltip.padding.bottom Number (default: 0)

The bottom padding of the crosshair tooltip.

axisDefaults.crosshair.tooltip.padding.left Number (default: 0)

The left padding of the crosshair tooltip.

axisDefaults.crosshair.tooltip.padding.right Number (default: 0)

The right padding of the crosshair tooltip.

axisDefaults.crosshair.tooltip.padding.top Number (default: 0)

The top padding of the crosshair tooltip.

axisDefaults.crosshair.tooltip.template String|Function

The template which renders the tooltip.

The fields which can be used in the template are:

  • value - the category value

axisDefaults.crosshair.tooltip.visible Boolean (default: false)

If set to true the chart will display the axis crosshair tooltip. By default the axis crosshair tooltip is not visible.

axisDefaults.crosshair.visible Boolean (default: false)

If set to true the chart will display the axis crosshair. By default the axis crosshair is not visible.

axisDefaults.crosshair.width Number (default: 1)

The width of the crosshair in pixels.

In this article