angularkendo-uipie-chartkendo-ui-angular2kendo-chart

how to create a function that starts at the click event of the pie chart


how to create a function that starts at the click event of the pie chart?

i would to pass the selected item to a function

<kendo-chart-series>
    <kendo-chart-series-item
           type="pie" [data]="dataSourcePieChart"
           categoryField="cost" field="cost">
           <kendo-chart-series-item-labels
              position="outsideEnd"
              color="#000"
              [content]="labelContent">
           </kendo-chart-series-item-labels>
     </kendo-chart-series-item>
</kendo-chart-series>

enter image description here


Solution

  • Bind seriesClick event to kendo-chart.

    SeriesClickEvent

    @Component({
      selector: 'my-app',
      template: `
        <kendo-chart (seriesClick)="seriesClick($event)">
          <kendo-chart-series>
            <kendo-chart-series-item  
                type="donut" [data]="data"
                categoryField="kind" field="share">
              <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[] = [{
        kind: 'Hydroelectric', share: 0.175
      }, {
        kind: 'Nuclear', share: 0.238
      }, {
        kind: 'Coal', share: 0.118
      }, {
        kind: 'Solar', share: 0.052
      }, {
        kind: 'Wind', share: 0.225
      }, {
        kind: 'Other', share: 0.192
      }];
    
      public labelContent(e: any): string {
        return e.category;
      }
      
      public seriesClick(e: any): void {
          console.log(e.category)
      }
    }
    

    Example: seriesClick