diff --git a/package-lock.json b/package-lock.json
index 2e4fe2b5..787b20eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@vueuse/head": "^2.0.0",
         "@vueuse/integrations": "^13.7.0",
         "animate.css": "^4.1.1",
+        "apexcharts": "^5.10.4",
         "axios": "1.13.5",
         "buefy": "^3.0.3",
         "bulma": "^1.0.2",
@@ -52,6 +53,7 @@
         "vue-qrcode-reader": "^5.7.3",
         "vue-router": "^4.5.0",
         "vue-toast-notification": "^3.1.3",
+        "vue3-apexcharts": "^1.11.1",
         "vue3-cookies": "^1.0.6",
         "vuex": "^4.1.0",
         "xlsx": "^0.18.5"
@@ -5168,6 +5170,12 @@
       "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
       "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="
     },
+    "node_modules/apexcharts": {
+      "version": "5.10.4",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.10.4.tgz",
+      "integrity": "sha512-gt0VUqZ2+mr25ScbUcKZgJr96jKYm4vjOcxEWCEh/E5F4dWqhyo3dBhPRvNNnkKiWxkMd2cBwj3ZYH3rK39fkA==",
+      "license": "SEE LICENSE IN LICENSE"
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -13483,6 +13491,21 @@
         "vue": "^3.0"
       }
     },
+    "node_modules/vue3-apexcharts": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.11.1.tgz",
+      "integrity": "sha512-MbN3vg8bMG19wc0Lm1HkeQvODgLm56DgpIxtNUO0xpf/JCzYWVGE4jzXp2JISzy2s3Kul1yOxNQUYsLvKQ5L9g==",
+      "license": "see LICENSE in LICENSE",
+      "peerDependencies": {
+        "apexcharts": ">=5.10.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "apexcharts": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/vue3-cookies": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue3-cookies/-/vue3-cookies-1.0.6.tgz",
diff --git a/package.json b/package.json
index 90e4d211..ebeb6038 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@vueuse/head": "^2.0.0",
     "@vueuse/integrations": "^13.7.0",
     "animate.css": "^4.1.1",
+    "apexcharts": "^5.10.4",
     "axios": "1.13.5",
     "buefy": "^3.0.3",
     "bulma": "^1.0.2",
@@ -61,6 +62,7 @@
     "vue-qrcode-reader": "^5.7.3",
     "vue-router": "^4.5.0",
     "vue-toast-notification": "^3.1.3",
+    "vue3-apexcharts": "^1.11.1",
     "vue3-cookies": "^1.0.6",
     "vuex": "^4.1.0",
     "xlsx": "^0.18.5"
diff --git a/src/i18n/locales/da.json b/src/i18n/locales/da.json
index 7c016241..25833eb2 100644
--- a/src/i18n/locales/da.json
+++ b/src/i18n/locales/da.json
@@ -1445,7 +1445,8 @@
       "cards": "Kort",
       "list": "Liste",
       "subtitle": "Se hvordan dine afdelinger klarer sig",
-      "title": "Overblik"
+      "title": "Overblik",
+      "charts": "Charts"
     },
     "pos": {
       "subtitle": "Registrer salg",
diff --git a/src/main.js b/src/main.js
index f04b9fe5..403ad12d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import App from "@/App.vue";
 import Buefy from 'buefy'
 import 'buefy/dist/css/buefy.css'
 import i18n from '@/i18n'
+import VueApexCharts from "vue3-apexcharts";
 import { initializeAutoTableExports } from '@/services/AutoTableExportService.js';
 import { installAxiosRequestQueue } from '@/services/installAxiosRequestQueue.js';
 
@@ -110,8 +111,9 @@ createApp(App)
 	.use(createHead())
 	.use(store)
 	.use(ToastPlugin)
-    .use(Buefy)
+  .use(Buefy)
 	.use(i18n)
+  .use(VueApexCharts)
 	.provide('Colors', Colors)
 	.provide('IS_DEV', IS_DEV)
 	.provide('API_URL', API_URL)
diff --git a/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue b/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
index e1327512..35b76c7f 100644
--- a/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
+++ b/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
@@ -15,6 +15,7 @@ import DepartmentDailyReport
   from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
 import {BTabItem, BTabs} from "buefy";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import DepartmentsChartReport from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue";
 
 // Get the departments
 const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();
@@ -73,6 +74,12 @@ const listDisplay = ref<listDisplayType>(listDisplayTabIndexes.cards);
             </div>
           </template>
         </b-tab-item>
+        <b-tab-item :label="$t('department_dashboard.overview.charts')"
+                    icon-pack="fas"
+                    icon="chart-bar"
+        >
+          <DepartmentsChartReport />
+        </b-tab-item>
       </b-tabs>
     </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue
new file mode 100644
index 00000000..a9749167
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue
@@ -0,0 +1,116 @@
+<script setup>
+import {defineProps} from "vue";
+import DepartmentDashboardDailyReportNavigation
+  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue";
+
+const props = defineProps({
+  /**
+   * Is this page department-specific?
+   */
+  departmentSpecific: {
+    type: Boolean,
+    default: true
+  },
+  defaultDepartmentId: {
+    type: Number,
+    default: null
+  }
+});
+
+const options = {
+  chart: {
+    type: 'bar',
+    zoom: {
+      enabled: false
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      dataLabels: {
+        total: {
+          enabled: true,
+          offsetX: 0,
+          style: {
+            fontSize: '13px',
+            fontWeight: 900
+          }
+        }
+      }
+    },
+  },
+  stroke: {
+    width: 1,
+    colors: ['#fff']
+  },
+  title: {
+    text: 'Mänedlig finansiel information per afdeling (DKK)'
+  },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return val + "K"
+      }
+    }
+  },
+  fill: {
+    opacity: 1
+  },
+  legend: {
+    position: 'top',
+    horizontalAlign: 'left',
+    offsetX: 40
+  }
+};
+
+const series = [{
+  name: 'Marine Sprite',
+  data: [44, 55, 41, 37, 22, 43, 21]
+}, {
+  name: 'Striking Calf',
+  data: [53, 32, 33, 52, 13, 43, 32]
+}, {
+  name: 'Tank Picture',
+  data: [12, 17, 11, 9, 15, 11, 20]
+}, {
+  name: 'Bucket Slope',
+  data: [9, 7, 5, 8, 6, 9, 4]
+}, {
+  name: 'Reborn Kid',
+  data: [25, 12, 19, 32, 25, 24, 10]
+}]
+</script>
+
+<template>
+  <div class="columns is-multiline">
+    <!-- Navigation -->
+    <div class="column is-12">
+      <DepartmentDashboardDailyReportNavigation :selectAllDepartments="!props.departmentSpecific" :loading="false" />
+    </div>
+    <div class="column is-9">
+      <apexchart type="area" height="400px" :options="options" :series="series"></apexchart>
+    </div>
+    <div class="column is-3">
+      <div class="select is-fullwidth is-small mb-4">
+        <select>
+          <option>Day</option>
+          <option>Week</option>
+          <option>Month</option>
+        </select>
+      </div>
+      <h2 class="title is-4 mb-2">Metric Name</h2>
+      <p><label><input type="checkbox"> Metric 1</label></p>
+      <p><label><input type="checkbox"> Metric 2</label></p>
+      <p><label><input type="checkbox"> Metric 3</label></p>
+      <p><label><input type="checkbox"> Metric 4</label></p>
+      <p><label><input type="checkbox"> Metric 5</label></p>
+      <p><label><input type="checkbox"> Metric 6</label></p>
+      <p><label><input type="checkbox"> Metric 7</label></p>
+      <p><label><input type="checkbox"> Metric 8</label></p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file