Fix the usage of the backgroundColor callback on label (#671)

Author: stockiNail

src/types/label.js

@@ -1,5 +1,5 @@
 import {drawBox, drawLabel, measureLabelSize, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect, getRelativePosition} from '../helpers';
-import {color, toPadding} from 'chart.js/helpers';
+import {toPadding} from 'chart.js/helpers';
 import {Element} from 'chart.js';
 
 export default class LabelAnnotation extends Element {
@@ -18,9 +18,7 @@ export default class LabelAnnotation extends Element {
     }
     const {labelX, labelY, labelWidth, labelHeight, options} = this;
     drawCallout(ctx, this);
-    if (this.boxVisible) {
-      drawBox(ctx, this, options);
-    }
+    drawBox(ctx, this, options);
     drawLabel(ctx, {x: labelX, y: labelY, width: labelWidth, height: labelHeight}, options);
   }
 
@@ -30,16 +28,13 @@ export default class LabelAnnotation extends Element {
     const padding = toPadding(options.padding);
     const labelSize = measureLabelSize(chart.ctx, options);
     const boxSize = measureRect(point, labelSize, options, padding);
-    const bgColor = color(options.backgroundColor);
-    const boxVisible = options.borderWidth > 0 || (bgColor && bgColor.valid && bgColor.rgb.a > 0);
-
+    const hBorderWidth = options.borderWidth / 2;
     const properties = {
-      boxVisible,
       pointX: point.x,
       pointY: point.y,
       ...boxSize,
-      labelX: boxSize.x + padding.left + (options.borderWidth / 2),
-      labelY: boxSize.y + padding.top + (options.borderWidth / 2),
+      labelX: boxSize.x + padding.left + hBorderWidth,
+      labelY: boxSize.y + padding.top + hBorderWidth,
       labelWidth: labelSize.width,
       labelHeight: labelSize.height
     };

test/fixtures/label/boxNotVisible.js

@@ -5,6 +5,7 @@ module.exports = {
     options: {
       scales: {
         x: {
+          display: false,
           labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         },
         y: {
@@ -18,25 +19,25 @@ module.exports = {
           annotations: {
             text1: {
               type: 'label',
-              xValue: 'January',
-              yValue: 20,
+              xValue: 'April',
+              yValue: 4,
+              content: 'no borderWidth, no backgroundColor'
+            },
+            text2: {
+              type: 'label',
+              xValue: 'April',
+              yValue: 12,
               backgroundColor: 'missing',
               borderWidth: 0,
-              content: 'This is my text',
-              position: {
-                x: 'end'
-              }
+              content: ['borderWidth: 0, wrong backgroundColor', 'use default fill style: #000 (black)']
             },
             text3: {
               type: 'label',
-              xValue: 'May',
+              xValue: 'April',
               yValue: 20,
               backgroundColor: 'rgba(250,250,250,0)',
               borderWidth: 0,
-              content: 'This is my text',
-              position: {
-                x: 'start'
-              }
+              content: 'borderWidth: 0, backgroundColor: rgba(250,250,250,0)'
             }
           }
         }

test/fixtures/label/boxNotVisible.png

@@ -0,0 +1,62 @@
+function gradient({chart: {ctx}, element}) {
+  const g = ctx.createLinearGradient(element.x, element.y, element.x + element.width, element.y + element.height);
+  g.addColorStop(0, 'red');
+  g.addColorStop(1, 'black');
+  return g;
+}
+
+module.exports = {
+  tolerance: 0.0060,
+  config: {
+    type: 'bar',
+    options: {
+      scales: {
+        x: {
+          display: false,
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        },
+        y: {
+          display: false,
+          min: 0,
+          max: 25
+        }
+      },
+      plugins: {
+        annotation: {
+          annotations: {
+            label1: {
+              type: 'label',
+              xMin: 1.5,
+              xMax: 3.5,
+              yMin: 5,
+              yMax: 10,
+              content: 'Label on gradient',
+              color: 'white',
+              backgroundColor: gradient,
+            },
+            label2: {
+              type: 'label',
+              xMin: 'July',
+              xMax: 'May',
+              yMin: 11,
+              yMax: 15,
+              content: 'Label on gradient',
+              color: 'white',
+              backgroundColor: gradient
+            },
+            label3: {
+              type: 'label',
+              xMin: 0,
+              xMax: 'May',
+              yMin: 20,
+              yMax: 16,
+              content: 'Label on gradient',
+              color: 'white',
+              backgroundColor: gradient
+            }
+          }
+        }
+      }
+    }
+  }
+};