Using Zoom plugin

const config = { type: 'treemap', data: { datasets: [ { label: 'My First dataset', tree: Utils.numbers(NUMBER_CFG), borderWidth: 0, backgroundColor: (ctx) => colorFromRaw(ctx), labels: { display: true, formatter: (ctx) => ctx.raw.v.toFixed(2), font: { size: 16 }, overflow: 'fit' } } ], }, options: { plugins: { zoom: { zoom: { wheel: { enabled: true, } }, pan: { enabled: true, } } } } };

const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderWidth: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
        labels: {
          display: true,
          formatter: (ctx) => ctx.raw.v.toFixed(2),
          font: {
            size: 16
          },
          overflow: 'fit'
        }
      }
    ],
  },
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          }
        },
        pan: {
          enabled: 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 = 'orange'; 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 = 'orange';
  if (border) {
    alpha += 0.01;
  }
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}