valueAxis.crosshairObject

The crosshair configuration options.

valueAxis.crosshair.colorString

The color of the crosshair.

valueAxis.crosshair.widthNumber

The width of the crosshair.

valueAxis.crosshair.opacityNumber

The opacity of the crosshair.

valueAxis.crosshair.dashTypeNumber

The dash type of the crosshair.

valueAxis.crosshair.visibleBoolean(default: false)

The dash type of the crosshair.

valueAxis.crosshair.tooltipObject

The crosshair tooltip configuration options.

valueAxis.crosshair.tooltip.backgroundString

The background color of the tooltip.

valueAxis.crosshair.tooltip.borderObject

The border configuration options.

valueAxis.crosshair.tooltip.border.colorString(default: "black")

The color of the border.

valueAxis.crosshair.tooltip.border.widthNumber(default: 0)

The width of the border.

valueAxis.crosshair.tooltip.colorString

The text color of the tooltip.

valueAxis.crosshair.tooltip.fontString(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

valueAxis.crosshair.tooltip.formatString

The tooltip format.

Example

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

valueAxis.crosshair.tooltip.paddingNumber|Object

The padding of the tooltip.

Example

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 }

valueAxis.crosshair.tooltip.templateString|Function

The tooltip template. Template variables:

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

Example

<div id="chart"></div>
<script>
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
             name: "Series 1",
             data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});
</script>

valueAxis.crosshair.tooltip.visibleBoolean(default: false)

A value indicating if the tooltip should be displayed.