JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div ng-app='App'>
    <div ng-controller='Ctrl'>
        <chart ng-model='data'>        
        </chart>
    </div>
</div>

CSS

chart{
    display:none;
    width:400px;
    height:200px;
}

JavaScript

var App = angular.module('App', []);

App.controller('Ctrl', function($scope) {
    $scope.data = [{ label: "ok", data: [[0, 1], [1, 5], [2, 2]]}];
});

App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {
            		series: {
                	bars: {
                    show: true,
                    barWidth: 0.08,
                    order: 2,
                    lineWidth: 0,
                    fillColor: '#00BCD4'
                	}
                },
                tooltip: {
                  show: true,
                  content: '<div style="background-color: rgba(255,255,255,0.75); border: 1px solid #000; padding: .25em"><h4 style>%s</h4><ul><li>X is %x</li><li>Y is %y</li></ul></div>',
                  //xDateFormat: "%y-%0m-%0d %H:%M:%S",
                  shifts: {
                      x: 10,
                      y: 20
                  },
                  defaultTheme: false
            		},
            });
            elem.show();
        }
    };
});