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

SeriesDefaults.tooltip

configuration

The chart series tooltip configuration options.

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

seriesDefaults.tooltip

Object

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

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

seriesDefaults.tooltip.border

Object

The border configuration options.

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

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

seriesDefaults.tooltip.font

String

The tooltip font.

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

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

seriesDefaults.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({
  seriesDefaults: {
    tooltip: {
      visible: true,
      format: "{0} x {1} ({2:C})"
    }
  },
  series: [
    {
      type: "bubble",
      data: [ [1, 2, 3] ]
    }
  ]
});
</script>

seriesDefaults.tooltip.padding

Number|Object

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

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

seriesDefaults.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({
  seriesDefaults: {
    tooltip: {
      visible: true,
      template: "#: value.x # - #: value.y # (#: value.size #)"
    }
  },
  series: [
    {
      type: "bubble",
      data: [ [1, 2, 3] ]
    }
  ]
});
</script>

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

Related Members