diff --git a/exampleSite/content/samples/charts.md b/exampleSite/content/samples/charts.md
index 0732736e..9c35548b 100755
--- a/exampleSite/content/samples/charts.md
+++ b/exampleSite/content/samples/charts.md
@@ -77,6 +77,7 @@ data: {
       'rgba(54, 162, 235, 0.7)',
       'rgba(255, 205, 86, 0.7)'
     ],
+    borderWidth: 0,
     hoverOffset: 4
   }]
 }
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c44c57e7..c3ce9fd9 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -125,45 +125,8 @@
       {{ range $name, $url := $links }}<link href="{{ $url }}" rel="me" />{{ end }}
     {{ end }}
   {{ end }}
-  {{/* Mermaid */}}
-  {{ if .Page.HasShortcode "mermaid" }}
-    {{ $mermaidJS := resources.Get "vendor/mermaid/mermaid.min.js" }}
-    {{ if $mermaidJS }}
-      {{ $mermaidJS := $mermaidJS | resources.Fingerprint "sha512" }}
-      <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
-      <script>
-        document.addEventListener('DOMContentLoaded', (event) => {
-          function css(name) {
-            return getComputedStyle(document.documentElement).getPropertyValue(name);
-          }
-          mermaid.initialize({ theme: "base", themeVariables: { background: css("--color-neutral"), primaryColor: css("--color-primary-200"), secondaryColor: css("--color-secondary-200"), tertiaryColor: css("--color-neutral-100"), primaryBorderColor: css("--color-primary-400"), secondaryBorderColor: css("--color-secondary-400"), tertiaryBorderColor: css("--color-neutral-400"), lineColor: css("--color-neutral-600"), fontFamily: "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", fontSize: "16px" }});
-        });
-      </script>
-    {{ end }}
-  {{ end }}
-  {{/* Chart */}}
-  {{ if .Page.HasShortcode "chart" }}
-    {{ $chartJS := resources.Get "vendor/chart/chart.min.js" }}
-    {{ if $chartJS }}
-      {{ $chartJS := $chartJS | resources.Fingerprint "sha512" }}
-      <script defer src="{{ $chartJS.RelPermalink }}" integrity="{{ $chartJS.Data.Integrity }}"></script>
-      <script>
-        document.addEventListener('DOMContentLoaded', (event) => {
-          function css(name) {
-            return getComputedStyle(document.documentElement).getPropertyValue(name);
-          }
-          Chart.defaults.font.size = 14
-          Chart.defaults.backgroundColor = css("--color-primary-300")
-          Chart.defaults.elements.point.borderColor = css("--color-primary-400")
-          Chart.defaults.elements.bar.borderColor = css("--color-primary-500")
-          Chart.defaults.elements.bar.borderWidth = 1
-          Chart.defaults.elements.line.borderColor = css("--color-primary-400")
-          Chart.defaults.elements.radar.backgroundColor = css("--color-primary-200")
-          Chart.defaults.elements.radar.borderColor = css("--color-primary-400")
-        });
-      </script>
-    {{ end }}
-  {{ end }}
+  {{/* Vendor */}}
+  {{ partial "vendor.html" . }}
   {{/* Analytics */}}
   {{ partialCached "analytics.html" .Site }}
   {{/* Extend head - eg. for custom analytics scripts, etc. */}}
diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
new file mode 100644
index 00000000..52ce1df3
--- /dev/null
+++ b/layouts/partials/vendor.html
@@ -0,0 +1,39 @@
+{{/* Mermaid */}}
+{{ if .Page.HasShortcode "mermaid" }}
+  {{ $mermaidJS := resources.Get "vendor/mermaid/mermaid.min.js" }}
+  {{ if $mermaidJS }}
+    {{ $mermaidJS := $mermaidJS | resources.Fingerprint "sha512" }}      <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+        function css(name) {
+          return getComputedStyle(document.documentElement).getPropertyValue(name);
+        }
+        mermaid.initialize({ theme: "base", themeVariables: { background: css("--color-neutral"), primaryColor: css("--color-primary-200"), secondaryColor: css("--color-secondary-200"), tertiaryColor: css("--color-neutral-100"), primaryBorderColor: css("--color-primary-400"), secondaryBorderColor: css("--color-secondary-400"), tertiaryBorderColor: css("--color-neutral-400"), lineColor: css("--color-neutral-600"), fontFamily: "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", fontSize: "16px" }});
+      });
+    </script>
+  {{ end }}
+{{ end }}
+{{/* Chart */}}
+{{ if .Page.HasShortcode "chart" }}
+  {{ $chartJS := resources.Get "vendor/chart/chart.min.js" }}
+  {{ if $chartJS }}
+    {{ $chartJS := $chartJS | resources.Fingerprint "sha512" }}
+    <script defer src="{{ $chartJS.RelPermalink }}" integrity="{{ $chartJS.Data.Integrity }}"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+        function css(name) {
+          return getComputedStyle(document.documentElement).getPropertyValue(name);
+        }
+        Chart.defaults.font.size = 14;
+        Chart.defaults.backgroundColor = css("--color-primary-300");
+        Chart.defaults.elements.point.borderColor = css("--color-primary-400");
+        Chart.defaults.elements.bar.borderColor = css("--color-primary-500");
+        Chart.defaults.elements.bar.borderWidth = 1;
+        Chart.defaults.elements.line.borderColor = css("--color-primary-400");
+        Chart.defaults.elements.arc.backgroundColor = css("--color-primary-200");
+        Chart.defaults.elements.arc.borderColor = css("--color-primary-500");
+        Chart.defaults.elements.arc.borderWidth = 1;
+      });
+    </script>
+  {{ end }}
+{{ end }}