Edit this page

The data point tooltip configuration options.

The background color of the tooltip. The default is determined from the series color.

The border configuration options.

The color of the border.

The width of the border.

The text color of the tooltip. The default is the same as the series labels color.

The tooltip font.

The tooltip format. Format variables depend on the series type:

  • Area, column, line and pie
  • 0 - value

  • Candlestick and OHLC

  • 0 - open value
  • 1 - high value
  • 2 - low value
  • 3 - close value
  • 4 - category name

Example

    //sets format of the tooltip
    format: "{0:C}--{1:C}"

The padding of the tooltip.

Example

    // sets the top, right, bottom and left padding to 3px.
    padding: 3


    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }

The tooltip template. Template variables:

  • value - the point value (either a number or an object)
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
      series: {
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },

        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }
    }
});
</script>

A value indicating if the tooltip should be displayed.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy