diff --git a/hub/static/js/area.js b/hub/static/js/area.js
index e179d0c0..12198f70 100644
--- a/hub/static/js/area.js
+++ b/hub/static/js/area.js
@@ -1,10 +1,12 @@
 import $ from 'jquery/dist/jquery.slim'
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from 'chart.js'
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import trackEvent from './analytics.esm.js'
 import setUpCollapsable from './collapsable.esm.js'
 import Dropdown from 'bootstrap/js/dist/dropdown'
 
-Chart.register( BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
+
+Chart.register( BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, ChartDataLabels);
 
 Chart.defaults.font.family = '"Public Sans", sans-serif'
 Chart.defaults.font.size = 12
@@ -156,7 +158,7 @@ var makeChart = function() {
     var $table = $(this)
     var chartType = $table.data('chart-type') || 'bar'
     var chartWidth = $table.data('chart-width') || 600
-    var rowHeight = $table.data('row-height') || 40
+    var rowHeight = $table.data('row-height') || 80
     var legendHeight = 60
     var labelHeight = 60
     var $div = $('<div>').attr({'class': 'chartwrapper'})
@@ -179,6 +181,12 @@ var makeChart = function() {
         },
         options: {
             indexAxis: primaryAxis,
+            layout: {
+                padding: {
+                    // Some extra padding for the data labels.
+                    right: 30
+                }
+            },
             scales: {
                 [crossAxis]: {
                     ticks: {
@@ -211,7 +219,16 @@ var makeChart = function() {
                             return context.dataset.label + ': ' + (context.raw / 100).toLocaleString('en-GB', { style: 'percent' });
                         }
                     }
-                }
+                },
+                datalabels: {
+                    formatter: function(value) {
+                        return value + '%'; // Adds percentage to the data label
+                    },
+                    color: '#6c757d',
+                    anchor: 'end',
+                    align: 'end',
+                    offset: 5,
+                },
             }
         }
     }
diff --git a/package-lock.json b/package-lock.json
index 89a19d8a..ac9d902b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,15 @@
 {
-  "name": "local-intelligence-hub",
+  "name": "lih",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "lih",
       "dependencies": {
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
         "chart.js": "^4.4.1",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "jquery": "^3.7.1",
         "leaflet": "^1.9.4",
         "leaflet-geosearch": "^4.0.0",
@@ -543,6 +545,14 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
diff --git a/package.json b/package.json
index a9e3c690..162341ca 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
     "chart.js": "^4.4.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "jquery": "^3.7.1",
     "leaflet": "^1.9.4",
     "leaflet-geosearch": "^4.0.0",