diff --git a/package-lock.json b/package-lock.json
index 6dd6cf09bff848207c980308c2fe92a828d89e7b..d486a822571c08ee8981390afe45d5584cf6b33d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "edition-node-gulp",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -136,6 +136,12 @@
         }
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "dev": true
+    },
     "@rollup/plugin-buble": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
@@ -1558,6 +1564,15 @@
         "is-regex": "^1.0.3"
       }
     },
+    "chart.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.0.tgz",
+      "integrity": "sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==",
+      "dev": true,
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
diff --git a/package.json b/package.json
index 006ceaf19061bd5bf79c7b0a49a29fd26cdeadc9..8efd572eff310217f483d5ef4e8854b45621c5a2 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@rollup/stream": "^1.0.0",
     "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
     "color": "^3.1.2",
     "gulp-add-src": "^1.0.0",
     "gulp-concat": "^2.6.1",
diff --git a/source/_patterns/02-organisms/11-chart/chart.mustache b/source/_patterns/02-organisms/11-chart/chart.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..f91cae46fb8adc44e32c11d954937e224be75aec
--- /dev/null
+++ b/source/_patterns/02-organisms/11-chart/chart.mustache
@@ -0,0 +1,3 @@
+<div class="max-h-80">
+    <canvas class="__chart-example"></canvas>
+</div>
diff --git a/source/js/components/RegionMap.vue b/source/js/components/RegionMap.vue
index ebff74871494489d53631ae2999cbc696070a97b..d247af13ab4f893db0f200f620a4ad75a249d4b3 100644
--- a/source/js/components/RegionMap.vue
+++ b/source/js/components/RegionMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="region-map flex justify-start items-center space-x-16 ">
+  <div class="region-map flex justify-start items-center space-x-16">
     <div class="">
       <h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
       <ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
diff --git a/source/js/main.js b/source/js/main.js
index b42e2bfd56e423028b7bd140ad887ccf81f5fc74..ea793997abe4164768af8cff3d70929a61975029 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -11,6 +11,8 @@ import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
+import Chart from 'chart.js/auto';
+
 
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
@@ -51,9 +53,41 @@ function renderVueAppElement(el) {
 }
 
 
+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
+}
+
+
 function init(event) {
   // Initialize Vue.js apps.
   forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
 }
 
 document.addEventListener('DOMContentLoaded', init);
diff --git a/tailwind.config.js b/tailwind.config.js
index ee8eef768e0dd21b154904dbd56862c90fc593ea..2daa9c7ad11d80ae4d80809e5e6d569987ea84ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,6 +54,7 @@ module.exports = {
         /^break-*/,
         /^overflow-*/,
         /^duration-*/,
+        /^max-h-*/,
         /^max-w-*/,
         /ico--*/,
       ],