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 = $('
').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",