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

Navigator.series.tooltip

configuration

The data point tooltip configuration options.

navigator.series.tooltip

Object

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

navigator.series.tooltip.background

String

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: {
            tooltip: {
                background: "#ffcc00"
            }
        }
    }
});
</script>

navigator.series.tooltip.border

Object

The border configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: {
            tooltip: {
                border: {
                    color: "red",
                    width: 2
                }
            }
        }
    }
});
</script>

navigator.series.tooltip.color

String

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: {
            tooltip: {
                color: "white"
            }
        }
    }
});
</script>

navigator.series.tooltip.font

String

The tooltip font.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: {
            tooltip: {
                font: "14px Arial, sans-serif"
            }
        }
    }
});
</script>

navigator.series.tooltip.format

String

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

pseudo

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

navigator.series.tooltip.padding

Number|Object

The padding of the tooltip.

pseudo

    // 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 }

navigator.series.tooltip.template

String|Function

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.

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

navigator.series.tooltip.visible

Boolean

A value indicating if the tooltip should be displayed.

Default: false

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

Related Members