diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b910838..daad068 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -52,7 +52,8 @@ module.exports = {
           'tree',
           'captions',
           'dividers',
-          'rtl'
+          'rtl',
+          'datalabels'
         ],
         '/': [
           '',
diff --git a/docs/samples/datalabels.md b/docs/samples/datalabels.md
new file mode 100644
index 0000000..aefe474
--- /dev/null
+++ b/docs/samples/datalabels.md
@@ -0,0 +1,78 @@
+# Using Datalabels plugin
+
+```js chart-editor
+// <block:setup:1>
+const DATA_COUNT = 12;
+const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};
+// </block:setup>
+
+// <block:utils:2>
+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();
+}
+// </block:utils>
+
+// <block:config:0>
+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,
+      }
+    }
+  }
+};
+
+// </block:config>
+
+const actions = [
+  {
+    name: 'Randomize',
+    handler(chart) {
+      chart.data.datasets.forEach(dataset => {
+        dataset.tree = Utils.numbers(NUMBER_CFG);
+      });
+      chart.update();
+    }
+  },
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```
diff --git a/docs/scripts/register.js b/docs/scripts/register.js
index 646ad43..bafa4b3 100644
--- a/docs/scripts/register.js
+++ b/docs/scripts/register.js
@@ -1,7 +1,9 @@
 import Chart from 'chart.js/auto';
 import {TreemapController, TreemapElement} from '../../dist/chartjs-chart-treemap.esm';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-Chart.register(TreemapController, TreemapElement);
+Chart.register(TreemapController, TreemapElement, ChartDataLabels);
+Chart.defaults.plugins.datalabels.display = false;
 
 Chart.register({
   id: 'version',
diff --git a/package-lock.json b/package-lock.json
index d8fe516..b4e9c4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@typescript-eslint/parser": "^5.4.0",
         "chart.js": "^3.6.0",
         "chartjs-adapter-date-fns": "^2.0.0",
+        "chartjs-plugin-datalabels": "^2.0.0",
         "chartjs-test-utils": "^0.4.0",
         "concurrently": "^7.4.0",
         "cross-env": "^7.0.3",
@@ -32,7 +33,7 @@
         "karma-firefox-launcher": "^2.1.0",
         "karma-jasmine": "^4.0.1",
         "karma-jasmine-html-reporter": "^1.5.4",
-        "karma-rollup-preprocessor": "^7.0.7",
+        "karma-rollup-preprocessor": "7.0.7",
         "karma-spec-reporter": "^0.0.34",
         "karma-summary-reporter": "^3.0.0",
         "pixelmatch": "^5.2.1",
@@ -5746,6 +5747,15 @@
         "chart.js": "^3.0.0"
       }
     },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.1.0.tgz",
+      "integrity": "sha512-WA6R4saSlY6mnyX78SkbSo2gGc+cj87lFi5zBrsjjYxE76JgXyxHa1OTodVCzRPoqeYJqSEOffeJ/897kRHR6w==",
+      "dev": true,
+      "peerDependencies": {
+        "chart.js": "^3.0.0"
+      }
+    },
     "node_modules/chartjs-test-utils": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/chartjs-test-utils/-/chartjs-test-utils-0.4.0.tgz",
@@ -11539,9 +11549,9 @@
       "dev": true
     },
     "node_modules/karma-rollup-preprocessor": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.8.tgz",
-      "integrity": "sha512-WiuBCS9qsatJuR17dghiTARBZ7LF+ml+eb7qJXhw7IbsdY0lTWELDRQC/93J9i6636CsAXVBL3VJF4WtaFLZzA==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.7.tgz",
+      "integrity": "sha512-Y1QwsTCiCBp8sSALZdqmqry/mWIWIy0V6zonUIpy+0/D/Kpb2XZvR+JZrWfacQvcvKQdZFJvg6EwlnKtjepu3Q==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.3.1",
@@ -23994,6 +24004,13 @@
       "dev": true,
       "requires": {}
     },
+    "chartjs-plugin-datalabels": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.1.0.tgz",
+      "integrity": "sha512-WA6R4saSlY6mnyX78SkbSo2gGc+cj87lFi5zBrsjjYxE76JgXyxHa1OTodVCzRPoqeYJqSEOffeJ/897kRHR6w==",
+      "dev": true,
+      "requires": {}
+    },
     "chartjs-test-utils": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/chartjs-test-utils/-/chartjs-test-utils-0.4.0.tgz",
@@ -28497,9 +28514,9 @@
       "requires": {}
     },
     "karma-rollup-preprocessor": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.8.tgz",
-      "integrity": "sha512-WiuBCS9qsatJuR17dghiTARBZ7LF+ml+eb7qJXhw7IbsdY0lTWELDRQC/93J9i6636CsAXVBL3VJF4WtaFLZzA==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.7.tgz",
+      "integrity": "sha512-Y1QwsTCiCBp8sSALZdqmqry/mWIWIy0V6zonUIpy+0/D/Kpb2XZvR+JZrWfacQvcvKQdZFJvg6EwlnKtjepu3Q==",
       "dev": true,
       "requires": {
         "chokidar": "^3.3.1",
diff --git a/package.json b/package.json
index d970364..ba8dbb5 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "chart.js": "^3.6.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-test-utils": "^0.4.0",
+    "chartjs-plugin-datalabels": "^2.0.0", 
     "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.20.2",
@@ -62,7 +63,7 @@
     "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "karma-rollup-preprocessor": "^7.0.7",
+    "karma-rollup-preprocessor": "7.0.7",
     "karma-spec-reporter": "^0.0.34",
     "karma-summary-reporter": "^3.0.0",
     "pixelmatch": "^5.2.1",