Add formatter option

src/controller.js

@@ -122,9 +122,12 @@ function buildData(dataset, mainRect, font) {
 function drawLabels(ctx, item, rect) {
   const opts = rect.options;
   const lh = opts.font.lineHeight;
-  const labels = (opts.label || item.g + '\n' + item.v).split('\n');
-  const y = rect.y + rect.height / 2 - labels.length * lh / 4;
-  labels.forEach((l, i) => ctx.fillText(l, rect.x + rect.width / 2, y + i * lh));
+  const label = opts.formatter;
+  if (label || item.g) {
+    const labels = ((label || item.g + '\n' + item.v) + '').split('\n');
+    const y = rect.y + rect.height / 2 - labels.length * lh / 4;
+    labels.forEach((l, i) => ctx.fillText(l, rect.x + rect.width / 2, y + i * lh));
+  }
 }
 
 export default class TreemapController extends DatasetController {
@@ -225,7 +228,7 @@ export default class TreemapController extends DatasetController {
       if (!rect.hidden) {
         rect.draw(ctx);
         const opts = rect.options;
-        if (shouldDrawCaption(rect, opts.font) && item.g) {
+        if (shouldDrawCaption(rect, opts.font)) {
           drawCaption(ctx, rect, item, opts, levels);
         }
       }
@@ -283,8 +286,11 @@ TreemapController.overrides = {
         label(item) {
           const dataset = item.dataset;
           const dataItem = dataset.data[item.dataIndex];
-          const label = dataItem.g || dataset.label;
-          return (label ? label + ': ' : '') + dataItem.v;
+          if (dataItem.g) {
+            return dataItem.g + ': ' + dataItem.v;
+          }
+          const value = item.element.options.formatter;
+          return value || dataItem.v;
         }
       }
     },

src/element.js

@@ -150,6 +150,7 @@ TreemapElement.defaults = {
   groupDividers: false,
   groupLabels: undefined,
   spacing: undefined,
+  formatter: undefined,
   label: undefined,
   rtl: undefined
 };

test/fixtures/basic/formatter.js

@@ -0,0 +1,26 @@
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        label: 'Simple treemap',
+        data: [6, 6, 4, 3, 2, 2, 1],
+        backgroundColor: 'red',
+        formatter(ctx) {
+          return ctx.type === 'data' ? ctx.raw.v : '';
+        }
+      }]
+    },
+    options: {
+      layout: {
+        padding: 20
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

types/index.esm.d.ts

@@ -30,7 +30,8 @@ export interface TreemapControllerDatasetOptions<DType> {
   hoverBorderColor?: Scriptable<Color, ScriptableContext<'treemap'>>;
   hoverBorderWidth?: number;
 
-  label?: Scriptable<string, ScriptableContext<'treemap'>>;
+  formatter?: Scriptable<string, ScriptableContext<'treemap'>>;
+  label?: string;
 
   data: TreemapDataPoint[]; // This will be auto-generated from `tree`
   groups?: Array<keyof DType>;