diff --git a/docs/HistogramView.js b/docs/HistogramView.js
new file mode 100644
index 00000000000..ecfc835da0a
--- /dev/null
+++ b/docs/HistogramView.js
@@ -0,0 +1,25 @@
+class HistogramView {
+
+    constructor() {
+    }
+
+    show(batchcode, div) {
+        fetch(`data/histograms/${batchcode}.json`)
+            .then(response => response.json())
+            .then(json => {
+                const data = json.histograms[3].histogram;
+                new Chart(
+                    div.querySelector('#symptomByBatchcodeHisto'),
+                    {
+                        type: 'bar',
+                        data: {
+                            datasets: [{
+                                label: 'Acquisitions by year',
+                                data: data
+                            }]
+                        }
+                    }
+                );
+            });
+    }
+}
\ No newline at end of file
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 03d8e35204d..6af4dc458d5 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -11,6 +11,7 @@
 <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
 <script src="./batchCodeTable.js"></script>
+<script src="./HistogramView.js"></script>
 <script>
     $(document).ready(function () {
       const batchCodeTableInitializer =
diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js
index 2d2cd9c2817..2acfe0c0c54 100644
--- a/docs/batchCodeTable.js
+++ b/docs/batchCodeTable.js
@@ -15,7 +15,7 @@ class BatchCodeTableInitializer {
         this.#batchCodeTable = this.#createEmptyBatchCodeTable();
         this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value));
         this.#displayCountry('Global')
-        // FK-TODO: refactor
+        const histogramView = new HistogramView();
         function createDiv() {
             const div = document.createElement("div");
             const canvas = document.createElement("canvas");
@@ -37,24 +37,7 @@ class BatchCodeTableInitializer {
                     const div = createDiv();
                     row.child(div).show();
                     tr.addClass('shown');
-                    const batchcode = 'FD6840';
-                    fetch(`data/histograms/${batchcode}.json`)
-                        .then(response => response.json())
-                        .then(json => {
-                            const data = json.histograms[3].histogram;
-                            new Chart(
-                                div.querySelector('#symptomByBatchcodeHisto'),
-                                {
-                                    type: 'bar',
-                                    data: {
-                                        datasets: [{
-                                            label: 'Acquisitions by year',
-                                            data: data
-                                        }]
-                                    }
-                                }
-                            );
-                        });
+                    histogramView.show('FD6840', div);
                 }
             });
     }