diff --git a/data/charts/colors.yml b/data/charts/colors.yml
new file mode 100644
index 0000000..66e11a0
--- /dev/null
+++ b/data/charts/colors.yml
@@ -0,0 +1,28 @@
+red: &red '#FF6384FF' 
+bgRed: &bgRed '#FF638433'
+blue: &blue '#36A2EBFF'
+bgBlue: &bgBlue '#36A2EB33'
+yellow: &yellow '#FFCE56FF'
+bgYellow: &bgYellow '#FFCE5633'
+aquamarine: &aquamarine '#4BC0C0FF'
+bgAquamarine: &bgAquamarine '#4BC0C033'
+purple: &purple '#9966FFFF'
+bgPurple: &bgPurple '#9966FF33'
+orange: &orange '#FF9F40FF'
+bgOrange: &bgOrange '#FF9F4033'
+darkseagreen: &darkseagreen '#8FBC8FFF'
+bgDarkseagreen: &bgDarkseagreen '#8FBC8F33'
+cyan: &cyan '#00FFFFFF'
+bgCyan: &bgCyan '#00FFFF33'
+brown: &brown '#A52A2AFF'
+bgBrown: &bgBrown '#A52A2A33'
+fuchsia: &fuchsia '#FF00FFFF'
+bgFuchsia: &bgFuchsia '#FF00FF33'
+lightskyblue: &lightskyblue '#87CEFAFF'
+bgLightskyblue: &bgLightskyblue '#87CEFA33'
+
+
+
+all: [*red, *blue, *yellow, *aquamarine, *purple, *orange, *darkseagreen, *cyan, *brown, *fuchsia, *lightskyblue,]
+
+bgAll: [*bgRed, *bgBlue, *bgYellow, *bgAquamarine, *bgPurple, *bgOrange, *bgDarkseagreen, *bgCyan, *bgBrown, *bgFuchsia, *bgLightskyblue]
\ No newline at end of file
diff --git a/layouts/shortcodes/barChart.html b/layouts/shortcodes/barChart.html
new file mode 100644
index 0000000..e972653
--- /dev/null
+++ b/layouts/shortcodes/barChart.html
@@ -0,0 +1,38 @@
+<div>
+    {{ $data := index .Site.Data (split (.Get "data") ".") }}
+    {{ $chartID := .Get "id" | default (md5 (jsonify $data)) }}
+    {{ $colors := .Site.Data.charts.colors.all }}
+    {{ $bgColors := .Site.Data.charts.colors.bgAll }}
+    <canvas id='{{ $chartID }}' width='{{ .Get "width" }}' height='{{ .Get "height" }}'></canvas>
+    <script>
+        (function () {
+            var ctx = document.getElementById('{{ $chartID }}');
+            var myChart = new Chart(ctx, {
+                type: "bar",
+                data: {
+                    labels: {{ $data.labels }},
+                    datasets: [{
+                        label: null,
+                        data: {{ $data.data }},
+                        backgroundColor: {{ $bgColors }},
+                        borderColor: {{ $colors }},
+                        borderWidth: 1
+                    }],
+                },
+                options: {
+                    plugins: {
+                        legend: { display: false }
+                    },
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                beginAtZero: true,
+                            }
+                        }]
+                    }
+                }  
+            });
+        })();
+    </script>
+</div>
+{{ .Page.Store.Set "hasChart" true }}
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html
index 67ec6d6..91d20ec 100644
--- a/layouts/shortcodes/chart.html
+++ b/layouts/shortcodes/chart.html
@@ -1,5 +1,4 @@
 <div>
-    <h1>TEST</h1>
     {{ $data := index .Site.Data (split (.Get "data") ".") }}
     {{ $chartID := .Get "id" | default (md5 (jsonify $data)) }}
     <canvas id='{{ $chartID }}' width='{{ .Get "width" }}' height='{{ .Get "height" }}'></canvas>