tooltip - API Reference - Kendo UI Chart

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

configuration

The chart series tooltip configuration options.

The chart series tooltip is displayed when the tooltip.visible option is set to true.

Object

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

tooltip.autoHide

Boolean

Specifies if the tooltip will be hidden when the mouse leaves the target element. If set to false, a Close button will be shown within tooltip.

Default: true

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

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({
  tooltip: {
    visible: true,
    background: "green"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

tooltip.border

Object

The border configuration options.

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

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({
  tooltip: {
    visible: true,
    color: "green"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

tooltip.font

String

The tooltip font.

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

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

tooltip.format

String

The format of the labels. Uses kendo.format.

Format placeholders:

Area, bar, column, funnel, pyramid, line and pie
- {0} - value
Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
Bullet
- {0} - value
- {1} - target value
Scatter and scatterLine
- {0} - x value
- {1} - y value
Candlestick and OHLC
- {0} - open value
- {1} - high value
- {2} - low value
- {3} - close value
- {4} - category name
RangeArea, rangeBar, rangeColumn
- {0} - from value
- {1} - to value

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

tooltip.opacity

Number

The opacity of the tooltip.

Default: 1

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

tooltip.padding

Number|Object

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

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

tooltip.shared

Boolean

If set to true the chart will display a single tooltip for every category.

Default: false

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

tooltip.sharedTemplate

String|Function

The template which renders the shared tooltip.

The fields which can be used in the template are:

points - the category points
category - the category name

<div id="chart"></div>
<script id="template" type="text/x-kendo-template">
  <div>#: category #</div>
  # for (var i = 0; i < points.length; i++) { #
    <div>#: points[i].series.name# : #: points[i].value #</div>
  # } #
</script>
<script>
$("#chart").kendoChart({
  series: [
    { name: "Series 1", data: [1,2] },
    { name: "Series 2", data: [1,2] }
  ],
  categoryAxis: {
    categories: [2012, 2013]
  },
  tooltip: {
    visible: true,
    shared: true,
    sharedTemplate:kendo.template($("#template").html())
  }
});
</script>

tooltip.template

String|Function

The template which renders the tooltip.

The fields which can be used in the template are:

category - the category name
dataItem - the original data item used to construct the point. Will be null if binding to array.
series - the data series
value - the point value (either a number or an object)
runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
total - the sum of all previous series values. Available for waterfall series.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  tooltip: {
    visible: true,
    template: "#: value.x # - #: value.y # (#: value.size #)"
  },
  series: [
    {
      type: "bubble",
      data: [ [1, 2, 3] ]
    }
  ]
});
</script>

tooltip.visible

Boolean

If set to true the chart will display the series tooltip. By default the series tooltip is not displayed.

Default: false

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

Related Members