tooltip Object

The chart series tooltip configuration options.

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

Example - configure the chart series tooltip

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

tooltip.autoHide Boolean(default: true)

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.

Example - preventing the tooltip from closing automatically

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

Example - set the chart series tooltip background

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

Example - set the chart series tooltip border

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

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

The color of the border.

Example - set the chart series tooltip border color

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

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 chart series tooltip border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  tooltip: {
    visible: true,
    border: {
      width: 2
    }
  },
  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.

Example - set the chart series tooltip color

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

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

The tooltip font.

Example - set the chart series tooltip font

<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

Example - set the chart series tooltip format

<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 (default: 1)

The opacity of the tooltip.

Example - set the chart tooltip opacity

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

Example - set the chart series tooltip padding

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

tooltip.padding.bottom Number (default: 0)

The bottom padding of the tooltip.

Example - set the chart series tooltip bottom padding

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

tooltip.padding.left Number (default: 0)

The left padding of the tooltip.

Example - set the chart series tooltip left padding

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

tooltip.padding.right Number (default: 0)

The right padding of the tooltip.

Example - set the chart series tooltip right padding

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

tooltip.padding.top Number (default: 0)

The top padding of the tooltip.

Example - set the chart series tooltip top padding

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

tooltip.shared Boolean (default: false)

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

Example - display shared tooltip

<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

Example - set the shared tooltip template

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

Example - set the chart series tooltip template

<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 (default: false)

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

Example - show the chart series tooltip

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