series.tooltip Object

The chart series tooltip configuration options.

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

Example - configure the chart series tooltip

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

Example - set the chart series tooltip background

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

Example - set the chart series tooltip border

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

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

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

Example - set the chart series tooltip color

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

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

Example - set the chart series tooltip format

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

Example - set the chart series tooltip padding

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

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

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

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

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

Example - set the chart series tooltip template

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