valueAxis.crosshair Object

The crosshair configuration options.

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

Example - set the value axis crosshair options

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      color: "green",
      width: 2,
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.crosshair.color String

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

Example - set the value axis crosshair color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      color: "green",
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.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

Example - set the value crosshair line dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      dashType: "dashDot",
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.crosshair.opacity Number (default: 1)

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

Example - set the value axis crosshair opacity

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      opacity: 0.1,
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.crosshair.tooltip Object

The crosshair tooltip options.

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

Example - configure the value axis crosshair tooltip

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        background: "green",
        border: {
          color: "black",
          width: 2
        },
        visible: true
      },
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.crosshair.tooltip.background String

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

Example - set the value axis crosshair tooltip background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        background: "green",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.crosshair.tooltip.border Object

The border options.

Example - set the value axis crosshair tooltip border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        border: {
          color: "black",
          width: 2
        },
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the value axis crosshair tooltip border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        border: {
          color: "black",
          width: 2
        },
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.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

Example - set the value axis crosshair tooltip border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        border: {
          dashType: "dashDot",
          width: 2
        },
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.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.

Example - set the value axis crosshair tooltip border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        border: {
          width: 2
        },
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.crosshair.tooltip.color String

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

Example - set the value axis crosshair tooltip color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        color: "#aa00bb",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

Example - set the value axis crosshair tooltip color as a RGB value

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        color: "rgb(128, 0, 255)",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

Example - set the value axis crosshair tooltip color by name

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        color: "green",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

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

The tooltip font.

Example - set the value axis crosshair tooltip font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        font: "20px sans-serif",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the value axis crosshair tooltip format

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        format: "Year: {0}",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the value axis crosshair tooltip padding as a number

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        padding: 20,
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The bottom padding of the crosshair tooltip.

Example - set the value axis crosshair tooltip bottom padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        padding: {
          bottom: 20
        },
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The left padding of the crosshair tooltip.

Example - set the value axis crosshair tooltip left padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        padding: {
          left: 20
        },
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The right padding of the crosshair tooltip.

Example - set the value axis crosshair tooltip right padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        padding: {
          right: 20
        },
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The top padding of the crosshair tooltip.

Example - set the value axis crosshair tooltip top padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        padding: {
          top: 20
        },
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

valueAxis.crosshair.tooltip.position String

The position of the crosshair tooltip.

Example - set the value axis crosshair tooltip position

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      color: "green",
      width: 2,
      visible: true,
      tooltip: {
        visible: true,
        // Position can be left or right.
        position: "right"
      }
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

valueAxis.crosshair.tooltip.template String|Function

The template which renders the tooltip.

The fields which can be used in the template are:

  • value - the value value

The text can be split into multiple lines by using line feed characters ("\n").

Example - set the value axis crosshair tooltip template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        template: "Year: #: value #",
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

Example - set the value axis crosshair tooltip template as a function

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    crosshair: {
      tooltip: {
        template: kendo.template("Year: #: value #"),
        visible: true
      },
      visible: true
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - show the value axis crosshair tooltip

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      tooltip: {
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.crosshair.visible Boolean (default: false)

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

Example - show the value axis crosshair

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

valueAxis.crosshair.width Number (default: 1)

The width of the crosshair in pixels.

Example - set the value axis crosshair width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
    crosshair: {
      width: 2,
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>
In this article
Related articles
Not finding the help you need? Improve this article