Issue in styling legend in Pie charts

Hi All,

I’m trying to style my pie chart as first image below. But with below code I’m getting as shown in second image. Even I tried the solution as mentioned here 2253. Then no legends are displayed. Also I don’t want white border between pies.

I’m using ChartJs 2.4.0 version. Please help me in resolving the issue.

var legend = chartInstance.generateLegend();
document.getElementById("legend").innerHTML = legend; 

[madmoizo]

A solution with an independent legend

Controller

Use your chart conf to create a list of legend items with color & label :

# Chart conf
scope.chart = []
scope.chart.labels = ['Food', 'Fuel']
scope.chart.colors = ['red', 'yellow']

# Legend
scope.legend = []
for label, i in scope.chart.labels
    scope.legend[i] =
      title: label
      color: scope.chart.colors[i]

(it’s coffee script, use http://js2.coffee/ if you want a translation)

Template

Loop on legend items to display them and you can do whatever you want with styles

 <div class="widget-body">
    <div class="row">
      <div class="col-md-12 col-lg-7">
        <div class="widget-pie-chart">
          <canvas id="monthlyExpensesChart" class="chart chart-pie" chart-data="communitytotalCostArray" chart-labels="communityCategoryNamesArray" chart-options="options" height="250" chart-colors="colors"></canvas>
        </div>
      </div>

      <div class="col-md-12 col-lg-5">
        <div class="widget-pie-legend">
          <a ng-repeat="item in ::legend" href="">
            <div class="pie-legend-item">
              <span class="legend-item-box" ng-style="::{'color': item.color}"></span>
              <span class="legend-item-label">{{::item.title}}</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

Result

You should see something like that

[nutanlade]

Thanks @etimberg. Issue resolved.