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

Series.tooltip

configuration

The chart series tooltip configuration options.

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

series.tooltip

Object

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

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

series.tooltip.border

Object

The border configuration options.

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

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

series.tooltip.font

String

The tooltip font.

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

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

series.tooltip.format

String

The format of the labels. Uses kendo.format.

Format placeholders:

Area, bar, column, line, pie, radarArea, radarColumn and radarLine
- {0} - value
Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
Bullet
- {0} - value
- {1} - target value
Scatter, scatterLine
- {0} - x value
- {1} - y value
PolarArea, polarLine and polarScatter
- {0} - x value (degrees)
- {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({
  series: [
    {
      tooltip: {
        visible: true,
        format: "{0} x {1} ({2:C})"
      },
      type: "bubble",
      data: [ [1, 2, 3] ]
    }
  ]
});
</script>

series.tooltip.padding

Number|Object

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

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

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

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

Related Members