Reply To: Legend in Pie Graph Padding (updates?)

[Manoj Mohan]

@boogeyman,

The logic mentioned in the above shared example seems to be working fine even in Angular. In angular, you can create an array of legend items and loop it using ngFor in the app.component.html file to display legend items as shown in the code snippet below.

app.component.html

<div class="container">
  <div id="legends" class="col col-2">
    <ul id="legendList">   
      <li *ngFor="let legend of legendList" [style.color]=legend.color>{{legend.text}}</li>   
    </ul>
  </div>
  <div id="chartContainer" class="col col-10" style="height: 360px;"></div>
</div>

app.component.ts

.
.
customLegends(chart: any) {
    var colorSetArray = chart.get('selectedColorSet');
    for (var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
      var dp = chart.options.data[0].dataPoints[i];
      this.legendList.push({
        text: dp.name,
        color: colorSetArray[i % colorSetArray.length]
      });
    }
}
.
.

Also, check out this Stackblitz example for complete working code.

—-
Manoj Mohan
Team CanvasJS