New to Kendo UI for jQuery? Start a free 30-day trial

AxisDefaults.crosshair.tooltip

configuration

The crosshair tooltip options.

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

axisDefaults.crosshair.tooltip

Object

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

String

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

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

Object

The border options.

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

String

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

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

String

The tooltip font.

Default: "12px Arial,Helvetica,sans-serif"

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

String

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

Default: "{0}"

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

Number|Object

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

Default: 0

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

String|Function

The template which renders the tooltip.

The fields which can be used in the template are:

value - the category value

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

Boolean

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

Default: false

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

Related Members