Crosshairs

The Chart crosshairs are lines which are perpendicular to the axes and enable the user to see the exact value at the current cursor position.

To enable the crosshair for an axis, either:

  • Add the corresponding crosshair component, or
  • Set the crosshair.visible option to true.

The following example demonstrates how to enable the crosshairs.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
            <kendo-chart-category-axis-item-crosshair>
                <kendo-chart-category-axis-item-crosshair-tooltip>
                </kendo-chart-category-axis-item-crosshair-tooltip>
            </kendo-chart-category-axis-item-crosshair>
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
       <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [crosshair]="crosshair">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
    public crosshair: any = {
        visible: true,
        tooltip: {
            visible: true,
            format: '#.##'
        }
    };
}

Current Cursor Values

To get the current hovered values, use the plotAreaHover event.

The following example demonstrates how to get the hovered values.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart (plotAreaHover)="onPlotAreaHover($event)">
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
            <kendo-chart-category-axis-item-crosshair>
                <kendo-chart-category-axis-item-crosshair-tooltip>
                </kendo-chart-category-axis-item-crosshair-tooltip>
            </kendo-chart-category-axis-item-crosshair>
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
       <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [crosshair]="crosshair">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
    public crosshair: any = {
        visible: true,
        tooltip: {
            visible: true,
            format: '#.##'
        }
    };

    public onPlotAreaHover(args: any): void {
        console.log(`Category: ${ args.category }`);
        console.log(`Value: ${ args.value }`);
    }
}

In this article