Fix tooltip label and improve hover border/background color

Author: jtblin

angular-chart.js

@@ -18,6 +18,7 @@
   'use strict';
 
   Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
+  Chart.defaults.global.tooltips.mode = 'label';
   Chart.defaults.global.elements.line.borderWidth = 2;
   Chart.defaults.global.elements.rectangle.borderWidth = 2;
   Chart.defaults.global.legend.display = false;
@@ -242,11 +243,11 @@
     function getColor (color) {
       return {
         backgroundColor: rgba(color, 0.2),
-        borderColor: rgba(color, 1),
         pointBackgroundColor: rgba(color, 1),
+        pointHoverBackgroundColor: rgba(color, 0.8),
+        borderColor: rgba(color, 1),
         pointBorderColor: '#fff',
-        pointHoverBackgroundColor: rgba(color, 1),
-        pointHoverBorderColor: rgba(color, 0.8)
+        pointHoverBorderColor: rgba(color, 1)
       };
     }
 

examples/app.js

@@ -151,20 +151,20 @@
     ];
     $scope.colors = [
       { // grey
-        fillColor: 'rgba(148,159,177,0.2)',
-        strokeColor: 'rgba(148,159,177,1)',
-        pointColor: 'rgba(148,159,177,1)',
-        pointStrokeColor: '#fff',
-        pointHighlightFill: '#fff',
-        pointHighlightStroke: 'rgba(148,159,177,0.8)'
+        backgroundColor: 'rgba(148,159,177,0.2)',
+        pointBackgroundColor: 'rgba(148,159,177,1)',
+        pointHoverBackgroundColor: 'rgba(148,159,177,1)',
+        borderColor: 'rgba(148,159,177,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
       },
       { // dark grey
-        fillColor: 'rgba(77,83,96,0.2)',
-        strokeColor: 'rgba(77,83,96,1)',
-        pointColor: 'rgba(77,83,96,1)',
-        pointStrokeColor: '#fff',
-        pointHighlightFill: '#fff',
-        pointHighlightStroke: 'rgba(77,83,96,1)'
+        backgroundColor: 'rgba(77,83,96,0.2)',
+        pointBackgroundColor: 'rgba(77,83,96,1)',
+        pointHoverBackgroundColor: 'rgba(77,83,96,1)',
+        borderColor: 'rgba(77,83,96,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(77,83,96,0.8)'
       }
     ];
     $scope.options = { legend: { display: false } };