diff --git a/docs/BatchCodeTableInitializer.js b/docs/BatchCodeTableInitializer.js
index e802b72ee96..85e8294ad92 100644
--- a/docs/BatchCodeTableInitializer.js
+++ b/docs/BatchCodeTableInitializer.js
@@ -1,6 +1,7 @@
 class BatchCodeTableInitializer {
 
     #batchCodeTableElement;
+    #barChartDescriptions;
 
     constructor(batchCodeTableElement) {
         this.#batchCodeTableElement = batchCodeTableElement;
@@ -8,51 +9,77 @@ class BatchCodeTableInitializer {
 
     initialize() {
         const self = this;
-        this.#batchCodeTableElement.DataTable(
-            {
-                ajax: 'data/batchCodeTables/Global.json',
-                initComplete: function (settings) {
-                    batchCodeTable = settings.oInstance.api();
-                    const columnSearch = new ColumnSearch(batchCodeTable.column(self.#getColumnIndex('Company')));
-                    columnSearch.columnContentUpdated();
-                },
-                language:
-                {
-                    searchPlaceholder: "Enter Batch Code"
-                },
-                searching: true,
-                search:
-                {
-                    return: true
-                },
-                processing: true,
-                deferRender: true,
-                order: [[this.#getColumnIndex('Adverse Reaction Reports'), "desc"]],
-                columnDefs:
-                    [
+        BarChartDescriptionsProvider
+            .getBarChartDescriptions()
+            .then(barChartDescriptions => {
+                this.#barChartDescriptions = barChartDescriptions;
+                this.#batchCodeTableElement.DataTable(
+                    {
+                        ajax: 'data/batchCodeTables/Global.json',
+                        initComplete: function (settings) {
+                            batchCodeTable = settings.oInstance.api();
+                            const columnSearch = new ColumnSearch(batchCodeTable.column(self.#getColumnIndex('Company')));
+                            columnSearch.columnContentUpdated();
+                        },
+                        language:
                         {
-                            searchable: false,
-                            targets: [
-                                this.#getColumnIndex('Adverse Reaction Reports'),
-                                this.#getColumnIndex('Deaths'),
-                                this.#getColumnIndex('Disabilities'),
-                                this.#getColumnIndex('Life Threatening Illnesses'),
-                                this.#getColumnIndex('Severe reports'),
-                                this.#getColumnIndex('Lethality')
+                            searchPlaceholder: "Enter Batch Code"
+                        },
+                        searching: true,
+                        search:
+                        {
+                            return: true
+                        },
+                        processing: true,
+                        deferRender: true,
+                        order: [[this.#getColumnIndex('Adverse Reaction Reports'), "desc"]],
+                        columnDefs:
+                            [
+                                {
+                                    searchable: false,
+                                    targets: [
+                                        this.#getColumnIndex('Adverse Reaction Reports'),
+                                        this.#getColumnIndex('Deaths'),
+                                        this.#getColumnIndex('Disabilities'),
+                                        this.#getColumnIndex('Life Threatening Illnesses'),
+                                        this.#getColumnIndex('Severe reports'),
+                                        this.#getColumnIndex('Lethality')
+                                    ]
+                                },
+                                {
+                                    orderable: false,
+                                    targets:
+                                        [
+                                            this.#getColumnIndex('Batch'),
+                                            this.#getColumnIndex('Company'),
+                                            this.#getColumnIndex('Countries')
+                                        ]
+                                },
+                                {
+                                    render: data => {
+                                        const numberInPercent = parseFloat(data);
+                                        return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + "%" : '';
+                                    },
+                                    targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
+                                },
+                                {
+                                    width: "1000px",
+                                    render: function (data, type, row, meta) {
+                                        return null;
+                                    },
+                                    createdCell: (cell, cellData, row, rowIndex, colIndex) => {
+                                        const batchcode = row[this.#getColumnIndex('Batch')];
+                                        if (batchcode in this.#barChartDescriptions) {
+                                            const barChartDescription = this.#barChartDescriptions[batchcode];
+                                            barChartDescription['batchcode'] = batchcode;
+                                            new BatchcodeByCountryBarChartView(cell).displayBatchcodeByCountryBarChart(barChartDescription);
+                                        }
+                                    },
+                                    className: "dt-head-center",
+                                    targets: [this.#getColumnIndex('Countries')]
+                                }
                             ]
-                        },
-                        {
-                            orderable: false,
-                            targets: [this.#getColumnIndex('Batch'), this.#getColumnIndex('Company')]
-                        },
-                        {
-                            render: (data, type, row) => {
-                                const numberInPercent = parseFloat(data);
-                                return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + " %" : '';
-                            },
-                            targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
-                        }
-                    ]
+                    });
             });
     }
 
@@ -74,6 +101,8 @@ class BatchCodeTableInitializer {
                 return 6;
             case 'Lethality':
                 return 7;
+            case 'Countries':
+                return 8;
         }
     }
 }
diff --git a/docs/batchCodes.html b/docs/batchCodes.html
index 3a9f506ba91..e79aeb34a54 100644
--- a/docs/batchCodes.html
+++ b/docs/batchCodes.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>Batch Codes of Coronavirus 2019 Vaccines</title>
-<!-- Google tag (gtag.js) -->
-<!--  FK-FIXME: reactivate
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Batch Codes of Coronavirus 2019 Vaccines</title>
+  <!-- Google tag (gtag.js) -->
+  <!--  FK-FIXME: reactivate
 <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -14,55 +15,78 @@
 
     gtag('config', 'G-ERHYDH4P64');
   </script> -->
-<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
-<link href="batchCodeTable.css" rel="stylesheet" type="text/css"/>
-<link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css"/>
-<script crossorigin="anonymous" integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
-<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css" integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg==" referrerpolicy="no-referrer" rel="stylesheet"/>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<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="./Utils.js"></script>
-<script src="./UIUtils.js"></script>
-<script src="./ColumnSearch.js"></script>
-<script src="./BatchCodeTableInitializer.js"></script>
-<script>
+  <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
+  <link href="batchCodeTable.css" rel="stylesheet" type="text/css" />
+  <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
+  <script crossorigin="anonymous"
+    integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w=="
+    referrerpolicy="no-referrer"
+    src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
+  <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css"
+    integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg=="
+    referrerpolicy="no-referrer" rel="stylesheet" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <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="./Utils.js"></script>
+  <script src="./UIUtils.js"></script>
+  <script src="./ColumnSearch.js"></script>
+  <script src="./BatchCodeTableInitializer.js"></script>
+  <script src="./BarChartDescriptionsProvider.js"></script>
+  <script src="./BatchcodeByCountryBarChartView.js"></script>
+  <script src="./BatchcodeByCountryBarChart.js"></script>
+  <script>
     $(document).ready(function () {
       const batchCodeTableInitializer = new BatchCodeTableInitializer($('#batchCodeTable'));
       batchCodeTableInitializer.initialize();
     });
   </script>
 </head>
+
 <body>
-<h1>Batch Codes of Coronavirus 2019 Vaccines</h1>
-<table class="display" id="batchCodeTable">
-<thead>
-<tr>
-<th>Batch</th>
-<th>Adverse Reaction Reports</th>
-<th>Deaths</th>
-<th>Disabilities</th>
-<th>Life Threatening Illnesses</th>
-<th>Company</th>
-<th>Severe reports</th>
-<th>Lethality</th>
-</tr>
-</thead>
-</table>
-<footer>
-<dl>
-<dt>Data Source:</dt>
-<dd><a href="https://vaers.hhs.gov/data/datasets.html" target="_blank">Vaccine Adverse Event Reporting System
+  <h1>Batch Codes of Coronavirus 2019 Vaccines</h1>
+  <table class="display" id="batchCodeTable">
+    <thead>
+      <tr>
+        <th>Batch</th>
+        <th>Adverse Reaction Reports</th>
+        <th>Deaths</th>
+        <th>Disabilities</th>
+        <th>Life Threatening Illnesses</th>
+        <th>Company</th>
+        <th>Severe reports</th>
+        <th>Lethality</th>
+        <th>Countries</th>
+      </tr>
+    </thead>
+  </table>
+  <footer>
+    <dl>
+      <dt>Data Source:</dt>
+      <dd><a href="https://vaers.hhs.gov/data/datasets.html" target="_blank">Vaccine Adverse Event Reporting System
           (VAERS)</a></dd>
-<dt>Last updated:</dt>
-<dd id="last_updated">June 02, 2023</dd>
-</dl>
-<span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch" target="_blank">Fork me on
+      <dt>Last updated:</dt>
+      <dd id="last_updated">June 02, 2023</dd>
+    </dl>
+    <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch" target="_blank">Fork me on
         GitHub</a></span>
-<div class="clearfix"></div>
-</footer>
-<template id="template-canvas">
-<canvas></canvas>
-</template>
+    <div class="clearfix"></div>
+  </footer>
+  <template id="template-canvas">
+    <canvas></canvas>
+  </template>
+  <template id="template-chartWithSlider">
+    <div class="chartWithSlider">
+      <div class="chartContainer">
+        <canvas class="canvas"></canvas>
+      </div>
+      <!-- FK-TODO: remove sliderContainer and slider -->
+      <div class="sliderContainer">
+        <div class="slider"></div>
+      </div>
+    </div>
+  </template>
 </body>
+
 </html>
\ No newline at end of file