How can I add a link to legend item in ngx-charts-pie-chart?

234 views Asked by At

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!

Laura

0

There are 0 answers