JSFiddle - React, Tailwind, and code Playground

by rapa09

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

.tc-chart-js-legend {
  
}

JavaScript

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

angular.module( 'app' )
.controller( 'AppController', function( $scope ) {
    
    $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 =  {
    	scaleFontSize: false,
      // Sets the chart to be responsive
      responsive: true,
      ///Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines : true,
      //String - Colour of the grid lines
      scaleGridLineColor : "rgba(0,0,0,.05)",
      //Number - Width of the grid lines
      scaleGridLineWidth : 1,
      //Boolean - Whether the line is curved between points
      bezierCurve : true,
      //Number - Tension of the bezier curve between points
      bezierCurveTension : 0.4,
      //Boolean - Whether to show a dot for each point
     ...