JSFiddle - React, Tailwind, and code Playground

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-line chart-options="options" chart-data="data" auto-legend ng-click="chartClick($event)" chart="chart"></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) {

  var originalLineInitialize = Chart.types.Line.prototype.initialize;
  Chart.types.Line.prototype.initialize = function(data) {
    var originalLabels = data.labels.slice();
    data.labels = new Array(data.labels.length);
    originalLineInitialize.apply(this, arguments);

    this.scale.xLabels = originalLabels;
    this.datasets.forEach(function(dataset) {
      dataset.points.forEach(function(point, i) {
        point.label = originalLabels[i];
      });
    });

    var originalScaleDraw = this.scale.draw;
    this.scale.draw = function() {
      for (var i = 0; i < this.xLabels.length; i++) {
        this.xLabels[i] = '';
      }
      originalScaleDraw.apply(this, arguments);
    }
  }

  $scope.chart;

  $scope.chartClick = function(event) {
    if ($scope.chart) {
      // Different methods depending on chart type
      console.log($scope.chart.getPointsAtEvent(event)); // for Points
      // console.log( $scope.chart.getSegmentsAtEvent( event ) ); // for Segments
    }
  };


  // Chart.js Data
  $scope.data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      fillColor: 'rgba(220,220,220,0.2)',
      strokeColor: 'rgba(220,220,220,1)',
      pointColor: 'rgba(220,220,220,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      data: [65, 59, 80, 81, 56, 55, 40]
    }, {
      label: 'My Second dataset',
      fillColor: 'rgba(151,187,205,0.2)',
      strokeColor: 'rgba(151,187,205,1)',
      pointColor: 'rgba(151,187,205,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(151,187,205,1)',
      data: [28, 48, 40, 19, 86, 27, 90]
    }]
  };

  // Chart.js Options
  $scope.options = {
    multiTooltipTemplate: '<%= datasetLabel + ": " +...