Fixes issue #6679, which referred to the EXP chart getting cropped.

website/client-old/css/tasks.styl

@@ -705,3 +705,7 @@ form
     background-color:inherit !important
   .task-checker label:hover:after
     content: ''
+
+// Add padding to exp-chart
+.exp-chart
+  padding-bottom: 10px

website/client-old/js/controllers/rootCtrl.js

@@ -186,8 +186,9 @@ habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$
     }
 
     $rootScope.charts = {};
+    $rootScope.resizeCharts = {};
     $rootScope.toggleChart = function(id, task) {
-      var history = [], matrix, data, chart, options;
+      var history = [], matrix, data, options, container;
       switch (id) {
         case 'exp':
           history = User.user.history.exp;
@@ -202,23 +203,70 @@ habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$
           $rootScope.charts[id] = (history.length == 0) ? false : !$rootScope.charts[id];
           if (task && task._editing) task._editing = false;
       }
+
+      if($rootScope.charts[id]) {
+        var handleResize = _.debounce(function() {
+          drawChart(id, data);
+        }, 300);
+
+        $rootScope.resizeCharts[id] = $rootScope.resizeCharts[id] || _.once(function() { $(window).resize(handleResize) });
+        $rootScope.resizeCharts[id]();
+      }
+
       matrix = [[env.t('date'), env.t('score')]];
       _.each(history, function(obj) {
         matrix.push([moment(obj.date).format(User.user.preferences.dateFormat.toUpperCase().replace('YYYY','YY') ), obj.value]);
       });
       data = google.visualization.arrayToDataTable(matrix);
+
+      drawChart(id, data);
+    };
+
+    function drawChart(id, data, options) {
+      var chart, width;
+
+      if(id === "exp") {
+        width = $(".row").width() - 20;
+      } else if(id === "todos") {
+        width = $(".task-column.todos").width();
+      } else {
+        width = $(".task-text").width() - 15;
+      }
+
       options = {
         title: window.env.t('history'),
         backgroundColor: {
           fill: 'transparent'
         },
-        hAxis: {slantedText:true, slantedTextAngle: 90},
+        hAxis: {
-        height:270,
+          slantedText: true,
-        width:300
+          slantedTextAngle: 90,
+          textStyle: {
+            fontSize: 12
+          }
+        },
+        vAxis: {
+          format: 'short',
+          textStyle: {
+            fontSize: 12
+          }
+        },
+        width: width,
+        height: 270,
+        chartArea: {
+          left: 50,
+          top: 30,
+          right: 20,
+          bottom: 65
+        },
+        legend: {
+          position: 'none'
+        }
       };
+
       chart = new google.visualization.LineChart($("." + id + "-chart")[0]);
       chart.draw(data, options);
-    };
+    }
 
     $rootScope.getGearArray = function(set){
       var flatGearArray = _.toArray(Content.gear.flat);

website/views/shared/tasks/task_view/index.jade

@@ -40,6 +40,8 @@
 .task-text(ng-dblclick='doubleClickTask(obj, task)')
   markdown(text='task._editing ? task._edit.text : task.text',target='_blank')
 
+  div(class='{{obj._id}}{{task.id}}-chart', ng-show='charts[obj._id+task.id]')
+
   div(ng-if='task.checklist && !$state.includes("options.social.challenges") && !task.collapseChecklist && !task._editing')
     fieldset.option-group.task-checklist
       label.checkbox(ng-repeat='item in task.checklist')