seriesDefaults.tooltip Object

The chart series tooltip configuration options.

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

Example - configure the chart series tooltip

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

Example - set the chart series tooltip background

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

Example - set the chart series tooltip border

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

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

seriesDefaults.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({
  seriesDefaults: {
    tooltip: {
      visible: true,
      border: {
        width: 2
      }
    }
  },
  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.

Example - set the chart series tooltip color

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

seriesDefaults.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({
  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

Example - set the chart series tooltip format

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

Example - set the chart series tooltip padding

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

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

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

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

seriesDefaults.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({
  seriesDefaults: {
    tooltip: {
      visible: true,
      padding: {
        top: 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.

Example - set the chart series tooltip template

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