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

ValueAxis.crosshair.tooltip

configuration

The crosshair tooltip options.

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

valueAxis.crosshair.tooltip

Object

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

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

<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.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({
  valueAxis: {
    crosshair: {
      tooltip: {
        color: "#aa00bb",
        visible: true
      },
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

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

<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

The tooltip font.

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

<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

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

Default: "{0}"

<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

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

Default: 0

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

String

The position of the crosshair tooltip.

<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").

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

<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

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

Default: false

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

Related Members