Using Datalabels plugin

const config = { type: 'treemap', data: { datasets: [ { label: 'My First dataset', tree: Utils.numbers(NUMBER_CFG), borderColor: (ctx) => colorFromRaw(ctx, true), borderWidth: 1, spacing: 0, backgroundColor: (ctx) => colorFromRaw(ctx), datalabels: { display: 'auto', anchor: 'start', align: 45, formatter: (value) => Math.trunc(value.v), color: 'white', font: { size: 20 } } } ], }, options: { plugins: { datalabels: { display: true, } } } };

const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderColor: (ctx) => colorFromRaw(ctx, true),
        borderWidth: 1,
        spacing: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
        datalabels: {
          display: 'auto',
          anchor: 'start',
          align: 45,
          formatter: (value) => Math.trunc(value.v),
          color: 'white',
          font: {
            size: 20
          }
        }
      }
    ],
  },
  options: {
    plugins: {
      datalabels: {
        display: true,
      }
    }
  }
};

const DATA_COUNT = 12; const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};

const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};

function colorFromRaw(ctx, border) { if (ctx.type !== 'data') { return 'transparent'; } const value = ctx.raw.v; let alpha = (1 + Math.log(value)) / 5; const color = 'purple'; if (border) { alpha += 0.01; } return helpers.color(color) .alpha(alpha) .rgbString(); }

function colorFromRaw(ctx, border) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'purple';
  if (border) {
    alpha += 0.01;
  }
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}