Chart Legends

---

Legend Template

To show a legend, you will first need to ensure that a legendTemplate is configured in your chart options:

$scope.options = {
  // ...
    legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
  // ...
};

Auto Legend

To automatically generate a legend, just add an auto-legend attribute to your chart

<div ng-app="myModule">
  <div ng-controller="myController">

    <canvas tc-chartjs chart-type="..." chart-options="..." chart-data="..." auto-legend></canvas>

  </div>
</div>

Custom Legend

To gain more control over the legends placement, you can use a seperate directive tc-chartjs-legend to place the charts legend

You will need to assign a scope variable for the legend content, this should be added to the chart, and the legend directives as follows:

<div ng-app="myModule">
  <div ng-controller="myController">

    <canvas tc-chartjs chart-type="..." chart-options="..." chart-data="..." chart-legend="legend"></canvas>

    <div tc-chartjs-legend chart-legend="legend"></div>

  </div>
</div>

angular
  .module( 'myModule', [ 'tc.chartjs' ])
  .controller( 'myController', function( $scope ) {

    // Chart.js Data
    $scope.data = {};

    // Chart.js Options
    $scope.options =  {};

    // Custom Legend Variable, to link chart to the legend directive
    $scope.legend = '';

  });

Sample CSS

The following CSS, is used by all the demos to show legends.

.tc-chart-js-legend {
  list-style-type: none;
  padding-left: 0px;
}
.tc-chart-js-legend li {
  display: block;
  float: left;
  clear:both;
  padding:10px;
}
.tc-chart-js-legend li span {
  width:25px;
  height:25px;
  display:block;
  float:left;
  margin-right:10px;
}