Legend in Pie Graph Padding (updates?)

[boogeyman]

Hi CanvasJs team!

Is padding in legend available already? I read similar questions of mine but the solution they provided is not suitable for my project which is the markerMargin. My current legend alignment is verticalAlign: "center", horizontalAlign:“right”,

So this is what it looks like,

I just want to add padding at bottom of every legend so that is it presentable.

Any workarounds will be appreciated. Thanks a lot CanvasJs team 😀😀😀

• This topic was modified 2 years, 11 months ago by boogeyman.
• This topic was modified 2 years, 11 months ago by boogeyman.

[boogeyman]

This is a sample reproduction of my chart

here

• This reply was modified 2 years, 11 months ago by boogeyman.

[boogeyman]

Please help team

[boogeyman]

Any support guys? A simple No would suffice. Thanks. I’m not giving up till someone told me its impossible because I read the forums and it was back 5 years ago and I hope there is a workaround that it is not written in documentation.

[Manoj Mohan]

@boogeyman,

You can add spacing between legend marker and legend text using markerMargin, but adding spacing between legends is not possible as of now. However, you can create custom legends using DOM element and use css property to add padding between legends as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[boogeyman]

Hi Manoj! Thanks for reaching out. Your solution is nice and working as expected, however I am using Angular and I’m not using jquery and document.getElementById. Would you mind sharing it with Angular code snippet?

Thanks again Manoj! 😀😀😀

• This reply was modified 2 years, 11 months ago by boogeyman.

[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

[boogeyman]

Alright Thanks Manoj. Sorry for disturbing you and you really provided me a stackblitz code. Thanks friend

[boogeyman]

Hi @manoj-mohan! Is it even possible to retain the original legend design without providing the

• bullets? I think that is more presentable. Thanks Manoj! Please let me know if it is possible.

• This reply was modified 2 years, 11 months ago by boogeyman.
• This reply was modified 2 years, 11 months ago by boogeyman.

[Manoj Mohan]

@boogeyman,

You can use list-style-type property of css to customize the bullets as per your requirement. Please take a look at this MDN documentation for more details.

—-
Manoj Mohan
Team CanvasJS