Add a link to legend item in ngx-charts-pie-chart?

I have implemented a pie chart using ngx-charts-pie-chart. This chart shows statistics about order statuses in an e-commerce site. The legend is automatically populated by an API, with status of order and quantity of orders for each status. Actually, it seems to have a link, but I can't figure how to add a real link to my orders list, filtering by the order status selected in the legend.

I have searched for something similar here and on Google, but it seems noone needed to change page by clicking on the Legend label...

Does anyone knows how can I do it?

This is my code:

HTML:

<ngx-charts-pie-chart *fuseIfOnDom (select)="onSelect($event)" [scheme]="chartOrderState.scheme" [results]="chartOrderState.analytics" [doughnut]="true" [legend]="true" [legendPosition]="below" [legendTitle]="' '">
</ngx-charts-pie-chart>


TS:


chartOrderState = {
scheme: {
domain: []
},
analytics: []
};

populateOrderStateAnalytics() {
this.orderService.getOrderStateAnalitycs().subscribe(analytics => {
analytics.map(analytic => {
this.chartOrderState.analytics.push(
{
stateId: analytic.description,
name: this.translateService.instant('OD_STATES.' + analytic.description) + ' - ' + analytic.percentage,
value: analytic.percentage
});
this.chartOrderState.scheme.domain.push(
analytic.color);
});
console.log('home.component: orderState:', analytics);
}, err => {
console.log('home.component: orderState:', err);
this.appResponseHandler.failure(err);
});
}


onSelect(data): void {
// Here I would need to redirect to the Orders List page, filtering by Order Status
console.log(data);
}


I tried to modify the attribute "name" on chartOrderState.analytics, in order to add the html attribute, but it dosn't convert it on a link, and I obtain a plain text label instead of a link.

Any ideas?

Many thanks in advance.

Continue reading...