Enable fit option when the label is overflowing the rectangle

docs/samples/zoom.md

@@ -39,7 +39,7 @@ const config = {
           font: {
             size: 16
           },
-          overflow: 'hidden'
+          overflow: 'fit'
         }
       }
     ],

docs/usage.md

@@ -211,6 +211,7 @@ The overflow property controls what happens to a label that is too big to fit in
 
 * `cut`: if the label is too big, it will be cut to stay inside the rectangle. It is the default.
 * `hidden`:  the label is removed altogether if the rectangle is too small for it.
+* `fit`:  the label will be automatically fit inside the rectangle if its dimension is bigger than the rectangle size.
 
 ### Position
 

src/element.js

@@ -1,5 +1,5 @@
 import {Element} from 'chart.js';
-import {toFont, isArray, toTRBL, toTRBLCorners, addRoundedRectPath, valueOrDefault, defined} from 'chart.js/helpers';
+import {toFont, isArray, toTRBL, toTRBLCorners, addRoundedRectPath, valueOrDefault, defined, isNumber} from 'chart.js/helpers';
 
 const widthCache = new Map();
 
@@ -164,29 +164,51 @@ function measureLabelSize(ctx, lines, fonts) {
   return widthCache.get(mapKey);
 }
 
+function toFonts(fonts, fitRatio) {
+  return fonts.map(function(f) {
+    f.size = Math.floor(f.size * fitRatio);
+    f.lineHeight = undefined;
+    return toFont(f);
+  });
+}
+
 function labelToDraw(ctx, rect, options, labelSize) {
   const {overflow, padding} = options;
   const {width, height} = labelSize;
   if (overflow === 'hidden') {
     return !((width + padding * 2) > rect.w || (height + padding * 2) > rect.h);
+  } else if (overflow === 'fit') {
+    const ratio = Math.min(rect.w / (width + padding * 2), rect.h / (height + padding * 2));
+    if (ratio < 1) {
+      return ratio;
+    }
   }
   return true;
 }
 
+function getFontFromOptions(rect, labels) {
+  const {font, hoverFont} = labels;
+  const optFont = (rect.active ? hoverFont : font) || font;
+  return isArray(optFont) ? optFont.map(f => toFont(f)) : [toFont(optFont)];
+}
+
 function drawLabel(ctx, rect, options) {
   const labels = options.labels;
   const content = labels.formatter;
   if (!content) {
     return;
   }
   const contents = isArray(content) ? content : [content];
-  const {font, hoverFont} = labels;
-  const optFont = (rect.active ? hoverFont : font) || font;
-  const fonts = isArray(optFont) ? optFont.map(f => toFont(f)) : [toFont(optFont)];
-  const labelSize = measureLabelSize(ctx, contents, fonts);
-  if (!labelToDraw(ctx, rect, labels, labelSize)) {
+  let fonts = getFontFromOptions(rect, labels);
+  let labelSize = measureLabelSize(ctx, contents, fonts);
+  const lblToDraw = labelToDraw(ctx, rect, labels, labelSize);
+  if (!lblToDraw) {
     return;
   }
+  if (isNumber(lblToDraw)) {
+    labelSize = {width: labelSize.width * lblToDraw, height: labelSize.height * lblToDraw};
+    fonts = toFonts(fonts, lblToDraw);
+  }
   const {color, hoverColor, align} = labels;
   const optColor = (rect.active ? hoverColor : color) || color;
   const colors = isArray(optColor) ? optColor : [optColor];

test/fixtures/basic/labelsOverflowFit.js

@@ -0,0 +1,29 @@
+export default {
+  tolerance: 0.0075,
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        label: 'Simple treemap',
+        data: [6, 6, 6, 4, 4, 2, 1, 1, 1, 1, 1, 1],
+        backgroundColor: 'red',
+        labels: {
+          display: true,
+          overflow: 'fit',
+          font: {
+            size: 64
+          }
+        }
+      }]
+    },
+    options: {
+      events: []
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

types/index.esm.d.ts

@@ -41,7 +41,7 @@ export type LabelPosition = 'top' | 'middle' | 'bottom';
 
 export type LabelAlign = 'left' | 'center' | 'right';
 
-export type LabelOverflow = 'cut' | 'hidden';
+export type LabelOverflow = 'cut' | 'hidden' | 'fit';
 
 type TreemapControllerDatasetDividersOptions = {
   display?: boolean,