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

Series.tooltip

configuration

The data point tooltip configuration options.

series.tooltip

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", open: 40, high: 45, low: 38, close: 42 },
            { date: "2013/01/02", open: 42, high: 48, low: 40, close: 45 }
        ]
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        tooltip: {
            background: "yellow",
            color: "black",
            visible: true
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

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({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        tooltip: {
            background: "#ffcc00"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.tooltip.border

Object

The border configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        tooltip: {
            border: {
                color: "red",
                width: 2
            }
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

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({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        tooltip: {
            color: "white",
            background: "darkblue"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.tooltip.font

String

The tooltip font.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        tooltip: {
            font: "14px Verdana"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

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

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 }

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.

pseudo

    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 tooltip: {
                     visible: true,
                     template: "#= category # - #= value #"
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });

series.tooltip.visible

Boolean

A value indicating if the tooltip should be displayed.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        tooltip: {
            visible: true
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

Related Members