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

ValueAxis.crosshair.tooltip

configuration

The crosshair tooltip configuration options.

valueAxis.crosshair.tooltip

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                background: "#ffffff",
                color: "#000000"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair.tooltip.background

String

The background color of the tooltip.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                background: "#f0f0f0"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair.tooltip.border

Object

The border configuration options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                border: {
                    color: "blue",
                    width: 2
                }
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair.tooltip.color

String

The text color of the tooltip.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                color: "#0000ff"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair.tooltip.font

String

The tooltip font.

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                font: "14px Georgia, serif"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair.tooltip.format

String

The tooltip format.

//sets format of the tooltip
format: "C"

valueAxis.crosshair.tooltip.padding

Number|Object

The padding of the tooltip.

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

valueAxis.crosshair.tooltip.template

String|Function

The tooltip template. Template variables:

value- the point value (either a number or an object)

// chart initialization
$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});

valueAxis.crosshair.tooltip.visible

Boolean

A value indicating if the tooltip should be displayed.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

Related Members