Expand the Touch Target Area

In some scenarios, the Kendo UI Charts produce series of points that are too small to be reliably clicked or touched.

It is possible to expand the touch target area by adding a transparent element to each series point.

Bar and Column Charts

The following example demonstrates how to expand the touch target area of points in Bar Charts. The touchTarget element is added to the seriesVisual element of the bar or column.

import { Component } from '@angular/core';
import { SeriesVisualArgs } from '@progress/kendo-angular-charts';
import { Group, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="column" [data]="seriesData"
          field="sales" categoryField="product"
          [visual]="seriesVisual">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  public seriesData: any[] = [{
    product: 'Chai',
    sales: 200
  }, {
    product: 'Chang',
    sales: 250
  }, {
    product: 'Aniseed Syrup',
    sales: 350
  }];

  public seriesVisual = (e: SeriesVisualArgs) => {
    const visual = e.createVisual();
    const group = new Group();
    const bbox = visual.bbox();

    // A transparent rectangle that serves as a touch zone
    const touchTarget = Path.fromRect(bbox, {
      transform: transform().scale(
        1.5, 2, bbox.center()
      ),

      // Uncomment the following line to hide the extended touch target
      // stroke: null,

      fill: {
        color: '#fff',
        opacity: 0
      }
    });

    group.append(touchTarget, visual);
    return group;
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Line Charts

The following example demonstrates how to expand the touch target area of points in Line Charts. The touchTarget element is added to the markerVisual element of the marker.

import { Component } from '@angular/core';
import { MarkerVisualArgs } from '@progress/kendo-angular-charts';
import { Group, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="line" [data]="seriesData"
          field="sales" categoryField="product"
          [markers]="{ visual: markerVisual }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  public seriesData: any[] = [{
    product: 'Chai',
    sales: 200
  }, {
    product: 'Chang',
    sales: 250
  }, {
    product: 'Aniseed Syrup',
    sales: 350
  }];

  public markerVisual = (e: MarkerVisualArgs) => {
    const visual = e.createVisual();
    const group = new Group();
    const bbox = visual.bbox();

    // A transparent rectangle that serves as a touch zone
    const touchTarget = Path.fromRect(bbox, {
      transform: transform().scale(
        2, 2, bbox.center()
      ),

      // Uncomment the following line to hide the extended touch target
      // stroke: null,

      fill: {
        color: '#fff',
        opacity: 0
      }
    });

    group.append(touchTarget, visual);
    return group;
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article