bound data behind a donut chart

[Nabeel]

I have bound some data in JSON format to a Bar Chart. How can I get the bound data on the click event of a bar in the bar chart.

[Nabeel]

on other words, how can we bind key/value pairs with KendoUI chart so that the 'value' part is displayed on front and on click event we can get the 'key' part?

[Svet]

Hi Nabeel,

One way to achieve the desired behavior is to use the (seriesClick) event of the Chart component.

Please check the following sample plunker demonstrating this approach:

http://plnkr.co/edit/hkqanurAsFpPD2wRDgkG?p=preview

The important part is marked in red below:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart (seriesClick)="onClick($event)">
      <kendo-chart-series>
        <kendo-chart-series-item
            type="donut" [data]="data"
            categoryField="value" field="key">
          <kendo-chart-series-item-labels
            [content]="labelContent"
            color="#fff" background="none">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public data: any[] = [{
    value: 'Hydroelectric', key: 0.175
  }, {
    value: 'Nuclear', key: 0.238
  }, {
    value: 'Coal', key: 0.118
  }, {
    value: 'Solar', key: 0.052
  }, {
    value: 'Wind', key: 0.225
  }, {
    value: 'Other', key: 0.192
  }];

  public labelContent(e: any): string {
    return e.category;
  }

  onClick(e){
    console.log(e.dataItem)
  }
}

I hope this helps. Please let me know in case you need further assistance for this case.

Regards,
Svetlin
Progress Telerik