How rise a legend click event programmatically?

1 Answer 77 Views
Charts
lucas
Top achievements
Rank 1
lucas asked on 02 Jun 2021, 07:15 PM

Hello everyone!

I am using in a project the kendo-chart donut component and I would like to rise the same click event programmatically in a legend as a filter. Is it possible to do in a .TS file? 

In the image is possible to see the donut with legend that I use like a filter. I have the same legends description in a combobox and when my costumers change the combobox, it should change the donut here.  

1 Answer, 1 is accepted

Sort by
1
Accepted
Hetali
Telerik team
answered on 03 Jun 2021, 09:31 PM

Hello Lucas,

In order to perform the Kendo UI Donut Chart's legend click function from the Kendo UI ComboBox selection, use the togglePointVisibility method in the valueChange event of the ComboBox. For example:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item
      #chartSeries
      type="donut"
      [data]="data"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

<p>Toggle Series Item:</p>
<kendo-combobox [data]="kind" (valueChange)="valueChange($event)">
</kendo-combobox>

@ViewChild('chartSeries') public chartSeries;
public toggledIndex;

public valueChange(e) {
  if (e) {
    this.chartSeries.data.forEach((item, index) => {
      if (item.kind === e) {
        this.toggledIndex = index;
        this.chartSeries.togglePointVisibility(index);
      }
    });
  } else {
    if (this.toggledIndex !== null) {
      this.chartSeries.togglePointVisibility(this.toggledIndex);
      this.toggledIndex = null;
    }
  }
}


In this StackBlitz example, the Kendo UI Donut Chart Series Item toggles on both the legend click and the Kendo UI ComboBox Selection.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts
Asked by
lucas
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or