Selection

The Chart category axis enables users to select a specific range by clicking, dragging, resizing, or mouse-wheeling.

To enable the selection, set the select option of the category axis.

Selection is supported only for horizontal category axes.

The following example demonstrates how to enable the selection.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart (selectEnd)="onSelectEnd($event)">
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="categories" [select]="selection">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3, 4]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
    public categories: string[] = ['A', 'B', 'C', 'D'];
    public selection: any = {
        from: 1,
        to: 2
    };

    public onSelectEnd = (args: any): void => {
        const selectedCategories = this.categories.slice(args.from, args.to);
        console.log(`Selected categories: ${ selectedCategories }`);
    };
}

Using Selection as Navigator

Similar to the Stock Chart, you can use the selection to filter the data which is displayed in another pane or chart.

The following example demonstrates how to use the selectEnd event to filter the main pane data.

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart (selectEnd)="onSelectEnd($event)" [transitions]="transitions"
            [categoryAxis]="[{
              categories: categories, min: min, max: max,
              labels: { step: step }, majorGridLines: { step: step }, majorTicks: { step: step }
            }, {
              categories: categories, name: 'navigatorAxis',
              labels: { step: navigatorStep }, majorGridLines: { step: navigatorStep }, majorTicks: { step: navigatorStep },
              pane: 'navigator', select: { from: min, to: max } }]"
            [valueAxis]="[{}, { name: 'valueNavigatorAxis', pane: 'navigator' }]"
            [panes]="[{}, { name: 'navigator', height: 100 }]">
            <kendo-chart-series>
                <kendo-chart-series-item type="line" style="smooth" [data]="data" [markers]="{ visible: false }">
                </kendo-chart-series-item>
                <kendo-chart-series-item type="area" style="smooth" [data]="data" axis="valueNavigatorAxis" categoryAxis="navigatorAxis">
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
  public data: number[] = [];
  categories: number[] = [];

  public transitions: boolean = false;
  public navigatorStep: number;
  public step: number;
  public min: number = 0;
  public max: number = 20;

  constructor() {
    const startYear = 2000;
    for (let i = 0; i < 200; i++) {
      this.categories.push(startYear + i);
      this.data.push(Math.floor(Math.random() * 200));
    }

    // set the navigator ticks and labels step to prevent the axis from becoming too cluttered
    this.navigatorStep = Math.floor(this.categories.length / 10);
  }

  public onSelectEnd(args: any): void {
    // set the axis range displayed in the main pane to the selected range
    this.min = args.from;
    this.max = args.to;

    // stop the animations
    this.transitions = false;

    // set the main axis ticks and labels step to prevent the axis from becoming too cluttered
    this.step = Math.floor((this.max - this.min) / 10);
  }
}

In this article