Overlapping Legends on Angular-Chart's Piechart

Question

I am using angular-charts (in a bid to simplify my life when it comes to displaying charts and stuff). So far, it had been pretty straightforward and I was able to render my piechart perfectly fine.

HTML:

<canvas id="pie" class="chart chart-pie"
  chart-data="data" chart-labels="labels" chart-legend="true">
</canvas> 

Javascript:

angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

However, now that I try to include the chart's legends, I have run into an issue; my legend labels are overlapping and I am not sure how to solve it (if there is indeed a workaround?!). Would greatly appreciate any help on this, :)

UPDATE:

.col-xs-12.col-sm-12.col-md-6
  .panel.panel-primary(ng-controller='pieChartController')
    .panel-heading
      h2.panel-title Title
    .panel-body
      canvas#pie.chart.chart-pie(chart-data='data', chart-labels='labels', chart-legend='true', chart-options='options')

UPDATE:

Upon inspection of my pie chart's legends, I find that it is subjected to the following CSS rules:

.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
  list-style-type: none;
  margin-top: 5px;
  text-align: center;
  /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
  -webkit-padding-start: 0;
  /* Webkit */
  -moz-padding-start: 0;
  /* Mozilla */
  padding-left: 0;
  /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
}

in angular-chart.css.

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

in bootstrap.css.

.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: smaller;
  cursor: default;
}

in angular-chart.js.

Answer 1

For future reference, in case anyone runs into the same odd problem as me, ...

I have checked and double-checked and can confirm that I was indeed using the latest versions of Chart.js and angular-chart.js (which @J.Titus was also using in his Plunkr).

"chart.js": "^1.0.2"
"angular-chart.js": "~0.8.8"

Yet, strangely, I found something really odd.

I was inspecting the elements on your Plunkr in hopes of finding a clue as to what's different. I found this on @J.Titus' Plunkr:

<span style="background-color:rgba(151,187,205,1)"></span> Download sales

On mine, it was:

<span style="background-color:rgba(151,187,205,1)">Download sales</span>

In order to correct this, I delved into Chart.js and changed all occurrences of legendTemplate ( ctrl + F is your best friend!) to the following:

"<ul class=\\"<%=name.toLowerCase()%>-legend\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\"background-color:<%=segments[i].fillColor%>\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

This moves the label text out of the <span> tag, effectively resolving the overlap issue.