diff --git a/project_report/static/src/js/graph_controller.js b/project_report/static/src/js/graph_controller.js
new file mode 100755
index 0000000..bcc90fa
--- /dev/null
+++ b/project_report/static/src/js/graph_controller.js
@@ -0,0 +1,26 @@
+odoo.define("project_report.GraphController", function(require) {
+    var GraphController = require("web.GraphController");
+
+    GraphController.include({
+
+        init: function(parent, model, renderer, params) {
+            this._super.apply(this, arguments);
+        },
+
+    _onButtonClick: function (ev) {
+        var $target = $(ev.target);
+        if ($target.hasClass('o_graph_button')) {
+            if (_.contains(['bar', 'horizontalBar', 'line', 'pie'], $target.data('mode'))) {
+                this.update({ mode: $target.data('mode') });
+            } else if ($target.data('mode') === 'stack') {
+                this.update({ stacked: !$target.data('stacked') });
+            } else if (['asc', 'desc'].includes($target.data('order'))) {
+                const order = $target.data('order');
+                const state = this.model.get();
+                this.update({ orderBy: state.orderBy === order ? false : order });
+            }
+        }
+    },
+
+    });
+});
diff --git a/project_report/static/src/js/graph_renderer.js b/project_report/static/src/js/graph_renderer.js
index ff2506f..5fa61c9 100755
--- a/project_report/static/src/js/graph_renderer.js
+++ b/project_report/static/src/js/graph_renderer.js
@@ -190,9 +190,10 @@ var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
         var self = this;
         if (_.contains(['bar', 'horizontalBar', 'line'], this.state.mode)) {
             var referenceColor;
-            if (this.state.mode === 'bar') {
+            if (this.state.mode === 'bar' || this.state.mode === 'horizontalBar') {
                 referenceColor = 'backgroundColor';
-            } else {
+            }
+            else {
                 referenceColor = 'borderColor';
             }
             legendOptions.labels = {
@@ -414,6 +415,36 @@ var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
         return animationOptions;
     },
 
+    _animation_HBar_Options: function () {
+        var animationHBarOptions = {};
+        var GraphVal = this;
+        if (this.state.mode === 'horizontalBar') { // && this.resModel == 'project.budget.hrs.report'
+             var animationHBarOptions = {
+                duration: "1",
+                "onComplete": function() {
+                var chartInstance = this.chart,
+                 ctx = chartInstance.ctx;
+                ctx.font = Chart.helpers.fontString(12, 'bold', "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
+                ctx.textAlign = 'left';
+                ctx.textBaseline = 'bottom';
+                this.data.datasets.forEach(function(dataset, i) {
+                  var meta = chartInstance.controller.getDatasetMeta(i);
+                  meta.data.forEach(function(bar, index) {
+                    var data = dataset.data[index];
+                    //console.log("data", JSON.stringify(data))
+                    var value;
+                    if(!!data){
+                        value = GraphVal._formatValue(data);
+                        ctx.fillText(value, bar._model.x, bar._model.y + 5);
+                    }
+                  });
+                });
+              }
+               };
+              }
+        return animationHBarOptions;
+    },
+
     _prepareOptions: function (datasetsCount) {
         const options = {
             maintainAspectRatio: false,
@@ -461,7 +492,7 @@ var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
             legend: this._getLegendOptions(datasetsCount),
             tooltips: this._getTooltipOptions(),
             elements: this._getElementOptions(),
-            //animation: this._animationOptions(),
+            animation: this._animation_HBar_Options(),
         };
         if (this._isRedirectionEnabled()) {
             options.onClick = this._onGraphClicked.bind(this);