JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<script src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>
<div ng-controller="AppController">

<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend ></canvas>
    
</div>

CSS

.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;
}

JavaScript

angular.module( 'app', ['tc.chartjs']);

angular.module( 'app' )
.controller( 'AppController', function( $scope ) {

    // Chart.js Data
    $scope.data = [
      {
        value: 300,
        color:'#F7464A',
        highlight: '#FF5A5E',
        label: 'Red'
      },
      {
        value: 50,
        color: '#46BFBD',
        highlight: '#5AD3D1',
        label: 'Green'
      },
      {
        value: 100,
        color: '#FDB45C',
        highlight: '#FFC870',
        label: 'Yellow'
      }
    ];

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

      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
      multiTooltipTemplate: "<%= value %>",
      tooltipFillColor: "red",

      // Sets the chart to be responsive
      responsive: true,

      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke : true,

      //String - The colour of each segment stroke
      segmentStrokeColor : '#fff',

      //Number - The width of each segment stroke
      segmentStrokeWidth : 2,

      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout : 50, // This is 0 for Pie charts

      //Number - Amount of animation steps
      animationSteps : 100,

      //String - Animation easing effect
      animationEasing : 'easeOutBounce',

      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate : true,

      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale : false,

      //String - A legend template
      legendTemplate : '<ul class="tc-chart-js-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>'

    };
    
    
});

/**
 * tc-angular-chartjs - v1.0.9 - 2014-10-14
 * Copyright (c) 2014 Carl Craig <[email protected]>
 * Dual licensed with the Apache-2.0 or MIT license.
...