categoryAxis.crosshair Object

The crosshair configuration options.

categoryAxis.crosshair.color String

The color of the crosshair.

categoryAxis.crosshair.width Number

The width of the crosshair.

categoryAxis.crosshair.opacity Number

The opacity of the crosshair.

categoryAxis.crosshair.dashType Number

The dash type of the crosshair.

categoryAxis.crosshair.visible Boolean(default: false)

The dash type of the crosshair.

categoryAxis.crosshair.tooltip Object

The crosshair tooltip configuration options.

categoryAxis.crosshair.tooltip.background String

The background color of the tooltip.

categoryAxis.crosshair.tooltip.border Object

The border configuration options.

categoryAxis.crosshair.tooltip.border.color String(default: "black")

The color of the border.

categoryAxis.crosshair.tooltip.border.width Number(default: 0)

The width of the border.

categoryAxis.crosshair.tooltip.color String

The text color of the tooltip.

categoryAxis.crosshair.tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

categoryAxis.crosshair.tooltip.format String

The tooltip format.

Example

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

categoryAxis.crosshair.tooltip.padding Number|Object

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 }

categoryAxis.crosshair.tooltip.template String|Function

The tooltip template. Template variables:

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

Example

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

categoryAxis.crosshair.tooltip.visible Boolean(default: false)

A value indicating if the tooltip should be displayed.

In this article