CODEWITHSUNDEEP
angularkendo-uitelerikkendo-grid
Alex D
Alex D

Reputation: 828

Angular Kendo Chart click event to pass value

I have a Kendo donut chart that I need clickable and redirect to www.foo.com/(foovalue) for each value on the donut. The telerik website has horrible documentation, any help would be great.

my component html looks like

       <kendo-chart style="height: 500px;">
          <kendo-chart-title text="Top Product Violations"></kendo-chart-title>
          <kendo-chart-series>
            <kendo-chart-series-item
              type="column" [data]="getTopProductViolations.topViolationsByProductsList"
              categoryField="name" field="count">
              <kendo-chart-series-item-labels
                color="#fff" background="none">
              </kendo-chart-series-item-labels>
            </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-category-axis>
            <kendo-chart-category-axis-item
              [labels]="{ rotation: '-45' }">
            </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>
          <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        </kendo-chart>

Upvotes: 0

Views: 3028

Answers (1)

John Bristowe
John Bristowe

Reputation: 611

I will assume your collection (i.e. "topViolationsByProductsList") contains items with a property that provides a URL (i.e. url). For example:

public products: any[] = [{
  name: 'Kendo UI', url: "https://www.telerik.com/kendo-ui"
}, {
  name: 'UI for ASP.NET Core', url: "https://www.telerik.com/aspnet-core-ui"
}];

Define a binding for the seriesClick event:

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

In the underlying component, define a handler for this event:

public onSeriesClick(e): void {
  // access e.dataItem.url of the bound item; use window.location or router from there
}

Upvotes: 6

Related Questions