context menu click event on pie or dounut chart

[rk]

I have a kendo chart whose type is either donut or pie. There is a need to handle right click (click type : context menu). Upon right click, a menu is displayed. 

However there seems to be only tap/click method available when the chart type is donut or pie.

(for column chart, the click event is handled for both 'tap' and 'context-menu').

 

  <kendo-chart (click)="onPlotAreaClick($event)">
        <kendo-chart-series>
            <kendo-chart-series-item #series type="donut" [data]="pieData" field="value" categoryField="category"></kendo-chart-series-item>
        </kendo-chart-series>
   </kendo-chart>

........................................................

onPlotAreaClick(event) {

    //not triggered for right click on pie chart

}

.........................................................

Can you please help ?

[Hetali]

Hi Ramakrishna,

In order to handle the right click, please use the contextmenu event as seen below:

<kendo-chart (contextmenu)="onPlotAreaClick($event)" title="Using right-click function">
  <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>

public onPlotAreaClick(e) {
  e.preventDefault(); //to prevent the default contextmenu from opening
  if(e.which===3) {
    console.log("Right click");
  }
}

Alternatively, you can also use the Kendo Context Menu to achieve the desired output. For example:

<div #target>
  <kendo-chart title="Using the Kendo Context Menu component">
    <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>
</div>

<kendo-contextmenu [target]="target" [items]="items">
</kendo-contextmenu>

Please take a look at this StackBlitz example demonstrating the above two methods.

I hope this helps. Please let me know if you have any further questions pertaining to the right click event in the Kendo Donut Chart.

Regards,
Hetali
Progress Telerik

[Piumi]

how to print clicked value ??

[Hetali]

Hi Piumi,

To print the value of the series clicked on in the Kendo UI Donut Chart, use the seriesClick event as seen below:

<kendo-chart (seriesClick)="seriesClick($event)">
</kendo-chart>

public seriesClick(e) {
  alert("Click on: " + e.category);
}

In this StackBlitz example, the seriesClick event shares the Kendo UI Donut Chart series details when you click on it.

I hope this helps.

Regards,
Hetali
Progress Telerik