Modify legend content Angular (wj-flex-pie)

Modify legend content Angular (wj-flex-pie)

Posted by: flavien.cocu on 4 July 2019, 3:35 am EST

• 

  flavien.cocu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 July 2019, 3:35 am EST

  Hello,
  
  I’m currently developing a donut chart with wj-flex-pie.
  
  I would like to modify the legend so that it contains the labels located in the “bindingName” column and the associated values located in the “binding” column.
  
  For the moment i can only modify the position or title of the legend.
  
  Here is my chart code.

  
  <wj-flex-pie
                                      #flexPie
                                      [header]="''"
                                      [itemsSource]="listeMontantParPeriode"
                                      [binding]="'montant'"
                                      [bindingName]="'periode'"
                                      [startAngle]="90">
                                      <wj-flex-chart-animation
                                          [animationMode]="'All'"
                                          [duration]="1000">
                                      </wj-flex-chart-animation>
                                      <wj-flex-chart-legend
                                          [title]="getNomCategorie()">
                                      </wj-flex-chart-legend>
                                  </wj-flex-pie>                 	
  
  

  Thx for your help.
  
  Flavien.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2019, 6:26 am EST

  Hello,

  To change the content of the legend of FlexPie, you need to handle the rendered event of FlexPie, get the HTML element that contains the legend and change it’s content accordingly. Please refer to the code snippet and sample below:

  In HTML:
  
  <wj-flex-pie (rendered)="renderChart(pie, $event)" #pie [itemsSource]="source" [binding]="'sales'" [bindingName]="'country'"
   [innerRadius]="0.5">
  <wj-flex-chart-legend [position]="'Left'">
  </wj-flex-chart-legend>
  </wj-flex-pie>
  
  In TS:
  
  renderChart(pie: wjcChart.FlexPie, e: wjcChart.RenderEventArgs) {
      var host = pie.hostElement;
      var legend = host.querySelector('.wj-legend');
      legend.querySelectorAll('text').forEach(t => {
        let oldHTML = t.innerHTML;
        t.innerHTML = `${this.capitalize(pie.bindingName)}: ${t.innerHTML}`;
      })
    }
  

  Sample:
  
  https://stackblitz.com/edit/angular-cvxny5

  Regards,
  
  Manish Gupta